simple-popup-modal v1.1.3

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

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.

    <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);
    });

Installation

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" />

Options

Callbacks