Animated jQuery Popup Dialog Plugin with CSS3 - animateDialog

animateDialog is a lightweight jQuery plugin that displays any html elements in a popup dialog box with CSS3 animations like fade, zoom, rotate, skew, and much more.

How to use it:

1. Include jQuery library together with jQuery animateDialog plugin's javascript and CSS in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.animateDialog.js"></script>
<link rel="stylesheet" href="jquery.animateDialog.css" />

2. Include jquery.animateDialog.junk.css file in the page for extra CSS3 animations.

<link rel="stylesheet" href="jquery.animateDialog.junk.css" />

3. Create a button to toggle a popup dialog.

<button id="demo">Click me</button>

4. Create the dialog content.

<div id="dialog" class="animateDialog-default" style="display:none;"><span class="message">Hello world!</span></div>

5. Initialize the plugin with available options.

$(function() {
$("#demo").click(function() {
$("#dialog").animateDialog({
"name" : "fade",
"iteration-count" : 1,
"duration" : "3s",
"timing-function" : "ease",
"delay" : "0s",
"direction" : "normal"});
})
})

Change log:

2014-03-19

• Change effect

2014-03-13

• Bugfix for FireFox

---

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