JDialog

jDialog is a jQuery plugin for modal dialog. By using this plugin, You can create interesting dialogs easily. It works in all modern browsers. Tested with jQuery 2.2+, file size is under 1KB, MIT Licensed.

Demo

Usage

First include the plugin file

<link rel="stylesheet" href="path/to/jdialog.min.css">
<script src="path/to/jdialog.min.js"><script>

Then, define a dialog and a button to trigger it

<button data-toggle="JDialog" data-target="dialog">CLICK ME</button>

<div class="jDialog" id="dialog">
    // your dialog code here

</div>

Finally, init your dialog.

$("#dialog").jDialog({
    skinClassName: 'demo',        // add your custom class to the dialog
    allowOverlay: true,           // whether to show overlay, default true
    animationType: 'fade-in',     // select how to animate the dialog
                                  // try 'fade-in', 'sticky-up', 'slide-in' and 'flip'
});

Done!

Modal Dialog

This is a modal window. You can do the following things with it:

  • Read: modal windows will probably tell you something important so don't forget to read what they say.
  • Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
  • Close: click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

  • Read: modal windows will probably tell you something important so don't forget to read what they say.
  • Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
  • Close: click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

  • Read: modal windows will probably tell you something important so don't forget to read what they say.
  • Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
  • Close: click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

  • Read: modal windows will probably tell you something important so don't forget to read what they say.
  • Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
  • Close: click on the button below to close the modal.