jQuery Modal

Every front-end developer needs their own modal window. jQuery modal is performant, tested, customisable and easy to integrate. Less than 2.5KB minified and 1KB gzipped.

Setup

This isn't a copy and paste plugin, it's just an outline. The plugin is instantiated in the usual manner and an instances API can be accessed via element data.

// Create a modal instance.
var $m = $('body').modal(),

    // Access an instance API
    api = $m.data('modal');

You can also 'namespace' plugin instances so that multiple modals can be attached to the same parent.

var $m = $('body');

// Attach two modal windows to the same parent
$m.modal(null, 'alpha').modal(null, 'beta');

var alpha = $m.data('modal_alpha');
var beta = $m.data('modal_beta');

The simplest example is to open a modal window instance with basic HTML content:

// Open the modal with some content
api.open("<p>Hello, is it me you're looking for?");

The API is flexible enough to do any common task such as confirmation boxes, displaying images and external content.

$.ajax({
	url: 'http://localhost/api?foo=bar',
	success: function(data)
	{
		if (api.isOpen)
		{
			api.update(data);
		}
		else
		{
			api.open(data);
		}
	},
	error: function(xhr, error)
	{
		console.log(error);
	}
});

Options

Global options can be specified via the standard jQuery plugin interface.

onopen

Callback function to execute after modal window has opened. Default: undefined.

onhide

Callback function to execute after modal window has closed. Default: undefined.

onupdate

Callback function to execute when modal window content is changed. Default: undefined.

fixed

Use CSS fixed positioning for the modal window instead of absolute. Default: false.

overlay

Create an overlay beneath the modal window and over the target. Default: true.

blur

Close the modal window when overlay is clicked. Default: true.

escape

Close the modal window when the escape key is pressed. Default: true.

width

Predefined width for modal window. Set to auto for the contents automatic flow width. Default: 640.

maxWidth

Set CSS max-width relative to the modal windows parent. Set to none to set no maximum width. Default: '95%'.

height

Predefined height for modal window. Set to auto for the contents automatic flow height. Default: 480.

maxHeight

Set CSS max-height relative to the modal windows parent. Set to none to set no maximum height. Default: '95%'.

namespace

Data attribute and event binding namespace. Default: 'modal'.

Public methods

.align()

Repositions the window to the center of the modal window parent.

.open([content][, callback])

Opens the modal window. Content Passed to the .update() method. Callback A function to call once the window has opened.

.update(content[, callback])

Updates the contents of the modal window. Content Set the content of the modal window via jQuery's .html() method. Callback A function to call once the window has been updated. The .align() method will be called if the window is open.

.resize(width, height)

Resizes the modal window content area. Width and Height can be any unit compatible with the jQuery Dimensions API.

.hide([callback])

Hides the modal window and removes event listeners. Callback A function to call once the window has closed.

A note on callbacks:

All callbacks will be called from the scope of the modal instance, so that this will refer to the modal instance. Callbacks provided as arguments to the public methods above will be executed in addition to those specified as instance options.