jQuery.leanModal2.js · eustasy Labs

Installation & Usage

Include after jQuery, preferably from jsDelivr. Then add a trigger element with a data-modal-id attribute pointing to the id of the modal element, and initialise leanModal on the trigger's selector. A standard href attribute can be used instead of data-modal-id.

Note: The modal element must be a sibling to the trigger element, or a child of a sibling element. This is because the plugin uses jQuery's .next() method to find the modal.

<script src="jQuery.leanModal2.min.js"></script>

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

Defaults

$('.leanmodal').leanModal({
	defaultStyles: true, // GLOBAL
	fadeTime: 200, // GLOBAL
	overlayOpacity: 0.7, // GLOBAL
	closeButton: '.js-leanmodal-close',
	disableCloseOnOverlayClick: false,
	disableCloseOnEscape: false,
	modalCenter: true,
});

Default Example

Modified

$('.leanmodal').leanModal({
	defaultStyles: true, // GLOBAL
	fadeTime: 200, // GLOBAL
	overlayOpacity: 0.7, // GLOBAL
	closeButton: '.close-it',
	disableCloseOnOverlayClick: true,
	disableCloseOnEscape: true,
	modalCenter: true,
});

Installation & Usage

Defaults

Default Example

Modified

Modified Example

Hello!

Hello!