Categories
Plugins

simple-popup-modal

Simple Modal / Popup (jQuery)
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
Features

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

Browser support

Chrome
Firefox
Internet Explorer
Edge
Safari
Netscape Navigator

36+
16+
9 (no fade effects), 10, 11
13+
5.1+
Not supported

Usage
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.
    Click
Option 2: HTML block Open a specific HTML block as popup content
    Click            

Hey there!

    

    var options = {        type: “html”,        htmlSelector: “#popup”,    };     $(“a.open-popup-link”).on(“click”, function(e) {        e.preventDefault();        $(this).simplePopup(options);    });
Installation
Include JS and CSS: include jQuery, jquery.simple-popup.js and jquery.simple-popup.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.
     Options

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

Callbacks

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.

GitHub Repo