Minimal Animated Modal Popup Plugin For jQuery - JDialog

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>
    <div>
      <p>This is a modal window. </p>
      <button data-dismiss="JDialog" id="test">Close</button>
    </div>
  </div>
</div>

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="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="dist/jdialog.min.js"></script>

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

$("#dialog-demo").jDialog({
  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.

$("#dialog-demo").jDialog({

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

});

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

$("#dialog-demo").jDialog({

  allowOverlay: false

});

---

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