Animated jQuery Popup Dialog Plugin with CSS3 - animateDialog
File Size: | 5.47 KB |
---|---|
Views Total: | 3802 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.