Minimal Animated Modal Popup Plugin For jQuery - JDialog

Minimal Animated Modal Popup Plugin For jQuery - JDialog
File Size: 20.2 KB
Views Total: 1702
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

JDialog is an extremely lightweight (1kb minified) jQuery popup plugin used for generating customizable, animated, responsive modal windows from any html blocks within the document. Currently comes with 4 CSS3 powered animation types: fadeIn, Sticky-up, flip and slideIn. Works perfectly on modern browsers which have CSS3 transitions and transforms support.

How to use it:

1. Insert your content to the modal window like this:

<div class="jDialog" id="dialog-demo">
  <div class="content">
    <h3>Modal Dialog</h3>
      <p>This is a modal window. </p>
      <button data-dismiss="JDialog" id="test">Close</button>

2. Create a button to trigger the modal window.

<button data-toggle="JDialog" data-target="dialog-demo">Toggle</button>

3. Load jQuery library and the jQuery JDialog plugin's files in the html page.

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

4. Initialize the plugin and specify the CSS class used to style the modal window.

  skinClassName: 'demo'

5. Style the modal window using your own CSS rules.

.demo {
  background: #ee455d;
  color: white;

.demo .content h3 {
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  margin: 0;
  padding: 14px 0;
  font-size: 28px;
  font-weight: 100;

.demo .content > div {
  padding: 24px 36px;
  line-height: 1.5rem;

.demo .content > div .button {
  display: block;
  margin: 24px auto 0;

6. Change the default animation.


  // or 'sticky-up', 'slide-in', 'flip'
  animationType: 'fade-in'


7. Disable the background overlay when the modal window opens.


  allowOverlay: false


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