jquery.modal

Simple jQuery modal dialog.

npm install jquery.modal
6 downloads in the last week
12 downloads in the last month

Synopsis

This is a small-ish (~2kB minified, ~1kB gzipped) modal plugin for jQuery. While most modal plugins try to handle all interactions themselves, jQuery.modal only provides the modal dialog and overlay.

Basic usage example

Try it on jsfiddle.

var $modal = $('<div/>')
  .text('Hello World! Click to dismiss.')
  .css({color: 'red', background: 'white', cursor: 'pointer'})
  .modal()
  .modal('open')
  .on('click', function() {
    $modal.modal('close');
  });

More realistic example

Try it on jsfiddle.

HTML

<a class="open-btn">Open</a>
<div class="my-dialog">
  <h1>Hello World!</h1>
  <a class="close-btn">Close</a>
</div>

CSS

.my-dialog {
  border: 2px solid black;
  background-color: papayawhip;
  color: red;
  padding: 5px;
}
.open-btn, .close-btn {
    border: 1px solid black;
    cursor: pointer;
}

JavaScript

var $dialog = $('.my-dialog').modal();
$dialog.on('click', '.close-btn', function(e) {
  e.preventDefault();
  $dialog.modal('close');
});
$('.open-btn').on('click', function(e) {
  e.preventDefault();
  $dialog.modal('open');
});

API

Wraps the matched content in a modal dialog intialized with the given options.

NOTE: The matched content will be removed from the page if necessary.

Reveals the overlay and modal dialog.

Hides the modal dialog and overlay.

Centers the modal dialog on the screen. This is called automatically every time open is called.

Version added: 0.2.3

Returns the current value of the option name for this modal dialog.

Sets the value of the option name for this modal dialog to the given value. Returns the new value.

The default options used by new modal dialogs.

NOTE: Changes will be reflected by existing modal dialogs unless the option was set explicitly on initialization or with modal('option', name, value). This is intentional.

showFn(callback)

Function to be called in order to reveal the dialog. Must call the passed callback when the animation is complete.

Default:

function(callback) {
  this.fadeIn(200, callback);
}

hideFn(callback)

Function to be called in order to hide the dialog. Must call the passed callback when the animation is complete.

Default:

function(callback) {
  this.fadeOut(200, callback);
}

Options used by the overlay.

showFn(callback)

Function to be called in order to reveal the overlay. Must call the passed callback when the animation is complete.

Default:

function(callback) {
  this.fadeTo(200, 0.5, callback);
}

hideFn(callback)

Function to be called in order to hide the overlay. Must call the passed callback when the animation is complete.

Default:

function(callback) {
  this.fadeOut(1, callback);
}

Acknowledgements

Inspired by edwardhotchkiss' jQuery.leanerModal, which is in turn based on finelysliced's jQuery.leanModal.

Unlicense

This is free and unencumbered public domain software. For more information, see http://unlicense.org/ or the accompanying UNLICENSE file.

npm loves you