jQuery.leanModal2.js

A pure solution to putting your own HTML and CSS to work as a modal dialogue.

Built for all the short dialogs, alerts, panels and such associated with an app, that you may want to handle in a modal window. Designed to handle hidden content, and doesn't apply any styles to the target element, other than for displaying and positioning.

Based on leanModal v1.1 by Ray Stone - http://finelysliced.com.au

Differences between v1.1 and v2.1

This fork of the original leanModal contains many fixes and improvements, and as such may not be entirely backwards compatible with the previous version. It is recommended you test your implementation before deployment.

• Bug: Fixes bug where an overlay is added with every call. Now, if one exists a new one is not added.
• Bug: Fixes bug where click events would be fired multiple times when the function is called more than once.
• Feature: Add option for triggering from element, using data-modal-id attribute.
• Improvement: No need for additional CSS for the overlay, neither linked nor inlined. It is added with the element.
• Improvement: Names functions more clearly to avoid conflicts.
• Improvement: Added official minified version.

Installation

Include after jQuery, preferably from jsDelivr:

<script src="https://cdn.jsdelivr.net/gh/eustasy/jQuery.leanModal2@2/jQuery.leanModal2.min.js"></script>

Usage

Add a trigger element with a data-modal-id attribute pointing to the id of the modal element, then initialise leanModal on the trigger's selector.

<button class="js-leanmodal-trigger" data-modal-id="#my-modal">Open</button>

<div id="my-modal">
    Modal content goes here.
    <button class="js-leanmodal-close">Close</button>
</div>

<script>
    $('.js-leanmodal-trigger').leanModal();
</script>

Alternatively, a standard href attribute pointing to the modal id can be used instead of data-modal-id.

<a class="js-leanmodal-trigger" href="#my-modal">Open</a>

Options

Option	Default	Description
defaultStyles	true	Inject default overlay and animation styles.
fadeTime	200	Fade duration in milliseconds.
overlayOpacity	0.7	Opacity of the background overlay.
closeButton	'.js-leanmodal-close'	Selector for the element(s) that close the modal.
disableCloseOnOverlayClick	false	Prevent closing when the overlay is clicked.
disableCloseOnEscape	false	Prevent closing when the Escape key is pressed.
modalCenter	true	Centre the modal inside the overlay using flexbox.