CSS3 Animated Morphing Modal Plugin With jQuery - AnimatedDialog.js

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">&times;</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.