Animated jQuery Popup Dialog Plugin with CSS3 - animateDialog

File Size: 5.47 KB
Views Total: 3825
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 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() {
"name" : "fade",
"iteration-count" : 1,
"duration" : "3s",
"timing-function" : "ease",
"delay" : "0s",
"direction" : "normal"});

Change log:


  • Change effect


  • 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.