<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" />

**Using Rails?** Check out the [jquery-modal-rails plugin](https://github.com/dei79/jquery-modal-rails)!

<meta name="viewport" content="width=device-width">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<script src="../jquery.modal.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="../jquery.modal.css" type="text/css" media="screen" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" />

<script src="highlight/highlight.pack.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8"> hljs.initHighlightingOnLoad(); </script>

pre code { padding: 5px; }

a.btn { display: block; text-align: center; padding: 1rem; }

}

.sponsor .note {

font-size: 11px;

text-transform: uppercase;

color: #bbb;

}

.sponsor img {

display: block;

max-width: 100%;

}

.sponsor .banner {

display: flex;

align-items: center;

justify-content: space-around;

}

.sponsor .illustration {

width: 40%;

}

.sponsor .content {

width: 50%;

}

.sponsor .text {

font-size: 16px;

line-height: 1.75;

margin: 28px 0;

}

.sponsor .content .text a {

color: #1284ff;

border-color: #1284ff;

}

.sponsor .content .text a:hover {

color: #373a3c;

border-color: #373a3c;

}

.sponsor .button {

background: #3ecf4a;

border-radius: 3px;

color: #fff;

padding: 10px 20px;

display: inline-block;

border: none;

}

.sponsor .button:hover {

background: #2baf36;

transform: translateY(-3px);

}

@media only screen and (max-width: 600px) {

.sponsor .note {

margin-bottom: 16px;

}

.sponsor .illustration {

display: none;

}

.sponsor .content {

width: 100%;

}

}

</style>

<title>jQuery Modal</title>

<meta name="description" content="jQuery Modal is the easiest way to display modal windows with jQuery. Built by Kyle Fox.">

<div class="sponsor">

<div class="note">Sponsor</div>

<div class="banner">

<div class="illustration">

<a href="https://www.getrewardful.com/?via=jquery-modal" target="_blank">

<img src="https://r.wdfl.co/financial-money-heart.svg" alt="Incentivize and reward your best promoters.">

</a>

</div>

<div class="content">

<a href="https://www.getrewardful.com/?via=jquery-modal" target="_blank">

<img width="200" src="https://r.wdfl.co/rewardful-logo.svg" alt="Rewardful: simple affiliate programs for Stripe.">

</a>

<div class="text">

<a href="https://www.getrewardful.com/?via=jquery-modal" target="_blank">Rewardful</a> is a simple way for SaaS companies to create <strong>affiliate and referral programs with Stripe.</strong>

Just connect your account and let us track referrals, discounts, and commissions for you!

</div>

<a href="https://www.getrewardful.com/?via=jquery-modal" class="button" target="_blank">Learn more &rarr;</a>

</div>

</div>

<h2 id="install"><a href="#install">#</a> Install</h2>

<p>The simplest method is to use the hosted version from <a href="https://cdnjs.com/libraries/jquery-modal">cdnjs</a>:</p>