<a class="one" data-content="Give me just a simple line of text or a quote please!">Click</a>
JS
$(document).ready(function() {
$("a.one").on("click", function(e) {
e.preventDefault();
$(this).simplePopup();
});
});
<a class="two">Click</a>
<div id="popup1">
<h1>This is it!!</h1>
<p>Here we go!</p>
<ul>
<li>Check this list</li>
<li>Beautiful</li>
<li>...</li>
</ul>
</div>
JS
$(document).ready(function() {
$("a.two").on("click", function(e) {
e.preventDefault();
$(this).simplePopup({ type: "html", htmlSelector: "#popup1" });
});
});
Here we go!
<div id="popup2">
<h1>This is it!!</h1>
<ul>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
<li>Wow this looks like long content</li>
</ul>
</div>
JS
$(document).ready(function() {
$("a.three").on("click", function(e) {
e.preventDefault();
$(this).simplePopup({ type: "html", htmlSelector: "#popup2" });
});
});
Different height, different width, no close button, escape button disabled and backgrounds and opacities
Click
<a class="four" data-content="Give me just a simple line of text or a quote please!">Click</a>
JS
$(document).ready(function() {
var options = {
width: "800px",
height: "400px",
closeCross: false,
escapeKey: false,
fadeInTimingFunction: "steps(5, end)",
fadeInDuration: 1.0,
fadeOutTimingFunction: "ease-in-out",
fadeOutDuration: 2.2,
background: "lightblue",
backdrop: 0.8,
backdropBackground: "red"
};
$("a.four").on("click", function(e) {
e.preventDefault();
$(this).simplePopup(options);
});
});
<a class="five" data-content="Give me just a simple line of text or a quote please!">Click</a>
JS
$(document).ready(function() {
var options = {
beforeOpen: function(html) {
html.find(".simple-popup-content").prepend("<h1>Voila</h1>");
},
afterOpen: function(html) {
html.find(".simple-popup-content").css("background", "lightgreen");
},
beforeClose: function(html) {
alert("We are going to close now!");
},
afterClose: function() {
alert("Closed now!");
}
};
$("a.five").on("click", function(e) {
e.preventDefault();
$(this).simplePopup(options);
});
});
The file "dist/jquery.simple-popup.settings.css" is included and used
Click
<link href="dist/jquery.simple-popup.settings.css" rel="stylesheet" type="text/css" />
<a class="six" data-content="Give me just a simple line of text or a quote please!">Click</a>
JS
$(document).ready(function() {
var options = {
inlineCss: false
};
$("a.six").on("click", function(e) {
e.preventDefault();
$(this).simplePopup(options);
});
});
<a class="seven" href="#" data-content="Give me just a simple line of text or a quote please!">Click</a>
<a class="seven" href="#" data-content="Give me just a simple line of text or a quote please!">Click</a>
<a class="seven" href="#" data-content="Give me just a simple line of text or a quote please!">Click</a>
JS
$(document).ready(function() {
$("a.seven").on("click", function(e) {
e.preventDefault();
$(this).simplePopup();
});
});