Check out my GitHub page for other plugins.

• Project page
• Issues

easyModal.js

A minimal jQuery modal that works with your CSS.

easyModal.js is inspired by leanModal.js, a lightweight modal window that works with your current setup and requires no images, CSS or other dependencies.

This plugin is written from scratch and implements some missing features in the orginal plugin like event triggering, close button, vertical centering, callbacks etc.

Examples

I have included two basic examples, an alert panel and a sign up form.

Download

Get the zip archive here.

How To Use

Step 1: together with JQuery (1.8.0+), include jquery.easyModal.js in your page:

<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.easyModal.js"></script>

Step 2: call the function on your modal selector, as follows:

$(function() {
    $(selector).easyModal();
});

Event triggering (open or close modal)

Open your modal:

$(selector).trigger('openModal');

Close your modal:

$(selector).trigger('closeModal');

Options

You can override the defaults by passing your desired values to the function, like this:

$(function() {
	$(selector).easyModal({
		top: 100,
		autoOpen: true,
		overlayOpacity: 0.3,
		overlayColor: "#333",
		overlayClose: false,
		closeOnEscape: false
	});
});

Available options:

top - Sets the top offset of your modal window, accepts any integer value.

default: "auto"

autoOpen - If set true, the modal will be opened immediately after initialization.

default: false

overlayOpacity - Sets the overlay opacity.

default: 0.5

overlayColor - Sets the color of the overlay.

default: "#000"

overlayClose - If set false, the modal will not be closed when the overlay is clicked.

default: true

overlayParent - Sets a custom parent for your modal.

default: "body"

closeOnEscape - If set false, the modal will not be closed when the escape key is pressed.

default: true

closeButtonClass - The class of your close buttons included in the modal.

default: ".close"

onOpen - Callback function called when the modal is opened.

argument: the modal window

$(function() {
	$(selector).easyModal({
		overlayClose: false,
		onOpen: function(myModal){
			$(myModal).append('Opened!');
		}
	});
});

onClose - Callback function called when the modal is closed.

argument: the modal window

$(function() {
	$(selector).easyModal({
		overlay : 0.4,
		onClose: function(myModal){
			$(myModal).append('Closed!');
		}
	});
});

zIndex - Function called for calculating the modal z-index.

default: The default function returns the highest z-index for any element in the page + 1.

updateZIndexOnOpen - Wheter the z-index should be calculted, using the zIndex function, before the modal opens. When set to false, the z-index is calculated and set once on initialization.

default: true

hasVariableWidth - If you're planning to use a modal with variable width (e.g. 60%), set this to true in order to get it correctly centered at all times.

default: false

Support & Feedback

For issues or suggestions please see easyModal.js on Github, or tweet @flaviusmatis.

Thanks for your support!