CSS3 Animated Morphing Modal Plugin With jQuery - AnimatedDialog.js
File Size: | 16.1 KB |
---|---|
Views Total: | 2421 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

AnimatedDialog.js is a jQuery plugin which utilize CSS3 transitions to display an animated modal dialog window with custom animation tweens.
How to use it:
1. Link to jQuery library and the jQuery AnimatedDialog.js plugin's files as follow.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <link href="jquery.animated.dialog.min.css" rel="stylesheet"> <script src="jquery.animated.dialog.min.js"></script>
2. Create a trigger button to toggle the modal window.
<button id="demo">Click me!</button>
3. Add custom content to the modal following the markup structure like so.
<div class="animated-dialog-content"> <div class="animated-dialog-header"> <div class="animated-dialog-title">Animated Dialog</div> <div class="animated-dialog-close">×</div> </div> <div> Some content goes here </div> </div>
4. Initialize the plugin with default settings. By default, the trigger button will move to the middle of the screen and the expand into a modal window when clicked.
$("#my-animated-dialog").animatedDialog();
5. Configuration options with default values.
$("#my-animated-dialog").animatedDialog({ // Selector for modal content "content" : "~ .animated-dialog-content", // Selector for close button "closeable" : ".animated-dialog-close", // The minimum width of the modal in px "width" : 800, // The minimum height of the modal in px "height" : 600, // The background color for the modal // Can be an <object> with start and end colours. // Useful if you have a different coloured button to the background of your dialog // e.g. // "background": { // "start": "#1565C0", // "end": "#fff" // } "background" : "#fff", // The animation tween, can be either a <string> or <function> // <string> value options are "centerExpand", "topExpand", "bottomExpand", "leftExpand", "rightExpand" // <function> return <array> of <object>s, each element is a stage in the tween. // Possible values to tween are top, left, width, height and backgroundColor // Passed parameters to the function are // <object> - container element of the dialog // <object> - the start tween parameters // <object> - the end tween parameters, this object should be included as the last element in the array // // e.g. // "tween": function(container, start, end) { // return [{ // "left" : (container.width / 2) - (start.width / 2), // "top" : (container.height / 2) - (start.height / 2) // }, end]; // } "tween" : "centerExpand" });
This awesome jQuery plugin is developed by georgelee1. For more Advanced Usages, please check the demo page or visit the official website.