Simple jQuery Modal & Dialog Box Plugin - Dialog

Dialog is a simple yet robust modal & dialog box plugin built with jQuery and CSS3 that is fully customizable, responsive-aware, and easily stylable.

Features:

• Auto center the dialog when window resized.
• CSS transitions for the modal mask.
• click on the background or press ESC to close the dialog.
• Allow scrolling of the background.
• Stacked modals supported.
• Callback functions supported.

Basic Usage:

1. Load the latest jQuery javascript library and jQuery Dialog plugin at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dialog.js"></script> 

2. Load the required jQuery Dialog Plugin's CSS in the head section of the document.

<link rel="stylesheet" type="text/css" href="dialog.css"/>

3. Create a link/button to toggle a dialog or modal box.

<button class="demo"></button>

4. Create a dialog box with a close button.

$("#demo").click(function() {
$.dialog({
"body": "Dialog Body!",
"title": "Dialog Title",
"show": true,
"footer": "<button class=\"dialog-button\" data-dialog-action=\"hide\">Close</button>"
});
});

5. All the options and callbacks to customize the plugin.

// body of the dialog, either a string, a jQuery instance, or
// a function that returns the body in a callback
body: '',

// title text
title: '',

//HTML or jQuery/DOM for footer
footer: '',

// position the dialog at a specific place, e.g. { top: 40, left: 100 }
position: null,

// dynamically keep the dialog in the center of the screen
dynamic: true,

// use an overlay to prevent interaction with the background
modal: false,

// dimensions of the dialog
width: null,
height: null,

// with "modal: true", specifies whether clicking on the background
// will close the dialog
closeOnMaskClick: true,

// close the dialog when the user presses ESC
closeOnEscape: true,

// show the li'l "X" in the top right corner
closeX: true,

// with "modal: true", allow scrolling of the background
allowScrolling: false,

// top and left gutter for long/wide dialogs
gutter: 20,

// event callbacks (always remember to invoke the callback argument!)
onHiding: function(catalyst, callback) { callback(); },
onShowing: function(callback) { callback(); },

// enable CSS transitions for the modal mask
transitionMask: true,

// show some buttons 
buttons: {}

---

This awesome jQuery plugin is developed by tmont. For more Advanced Usages, please check the demo page or visit the official website.