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 containing the minified and uncompressed version here.

How To Use

Step 1: together with JQuery, 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

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

Support & Feedback

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

Thanks for your support!