A simple, clean jQuery modal / popup, works out of the box. When you don't like inline CSS or centering a popup with JS, like me, try it out.
Check out the demo's
- Flexible and configurable
- Smooth fade in / fade out effect (customizable)
- Center vertically and horizontally with dynamic content (CSS only)
- Escape key closes popup
- Load popup content via "data" attribute on HTML or with JS selector to HTML block
- Optional: don't inject inline CSS with JS
Chrome | Firefox | Internet Explorer | Edge | Safari | Netscape Navigator |
---|---|---|---|---|---|
36+ | 16+ | 9 (no fade effects), 10, 11 | 13+ | 5.1+ | Not supported |
Call the simplePopup()
function on a jQuery selector and pass in an options
object if you like.
var options = {
escapeKey: false,
fadeInDuration: 1.0
};
$("a.open-popup-link").on("click", function(e) {
e.preventDefault();
$(this).simplePopup(options);
});
Option 1: inline text Open simple text in the popup.
<a class="open-popup-link" data-content="Hey there!">Click</a>
Option 2: HTML block Open a specific HTML block as popup content
<a class="open-popup-link">Click</a>
<div id="popup">
<p>Hey there!</p>
</div>
var options = {
type: "html",
htmlSelector: "#popup",
};
$("a.open-popup-link").on("click", function(e) {
e.preventDefault();
$(this).simplePopup(options);
});
Include JS and CSS: include jQuery, jquery.simple-popup.js
and jquery.simple-popup.css
.
<script src="jquery.js"></script>
<script src="jquery.simple-popup.min.js"></script>
<link href="jquery.simple-popup.css" rel="stylesheet" type="text/css" />
When you don't like CSS to be injected with JS, make sure to set inlineCss: false
in your options and add the following CSS (config) file.
<link href="jquery.simple-popup.settings.css" rel="stylesheet" type="text/css" />
Option | Values | Default | Description |
---|---|---|---|
type | "auto", "data", "html" | "auto" | data: check for a "data-content" attribute on the selector html: use a block of HTML in the DOM to show in the popup. Select which block of HTML by setting the option "htmlSelector" auto: try "data", try "html" and fail |
htmlSelector | CSS selector | null | Select which block of HTML is used as popup content. For example "#popup" or ".popup-content". Works only when type: html or type: auto with no data attribute set. |
height | CSS value | "auto" | The height of the popup |
width | CSS value | "600px" | The width of the popup |
background | CSS value | "#fff" | The background for the popup |
backdrop | Number between 0 - 1 | 0.7 | When the number is between 0 and 1, this determines the opacity of the backdrop, When it has a falsy value, the backdrop is never shown. |
backdropBackground | CSS value | "#000" | The background for the backdrop |
fadeInDuration | CSS value | 0.3 | The fade in duration time in seconds. A number greater than 0. |
fadeInTimingFunction | CSS value | "ease" | The fade in timing function is a value for the CSS property "transition-timing-function". Examples: "ease", "ease-in-out", "steps(5, end)". |
fadeOutDuration | CSS value | 0.3 | The fade out duration time in seconds. A number greater than 0. |
fadeOutTimingFunction | CSS value | "ease" | The fade out timing function is a value for the CSS property "transition-timing-function". Examples: "ease", "ease-in-out", "steps(5, end)". |
inlineCss | true, false | true | Inject CSS via JS or not. When you choose false here, you need to include jquery.simple-popup.settings.css . |
escapeKey | true, false | true | When pressing the escape key, the popup closes |
closeCross | true, false | true | Show the closing cross on the top right of the popup or not |
Function | Parameters | Description |
---|---|---|
beforeOpen(html) | html: jQuery object of the popup with id "#simple-popup". Content should be written in it's, child ".simple-popup-content", like this: html.find(".simple-popup-content").append(""); |
This function is called before the popup is going to open and before any fade in/out effects. |
afterOpen(html) | html: jQuery object of the popup with id "#simple-popup". Content should be written in it's, child ".simple-popup-content", like this: html.find(".simple-popup-content").append(""); |
This function is called after the popup is opened and after any fade in/out effects. |
beforeClose(html) | html: jQuery object of the popup with id "#simple-popup". Content should be written in it's, child ".simple-popup-content", like this: html.find(".simple-popup-content").append(""); |
This function is called before the popup is going to close and before any fade in/out effects. |
afterClose | This function is called after the popup is closed and after any fade in/out effects. |