This time I will share jQuery Plugin and tutorial about CSS3 Animated Morphing Modal Plugin With jQuery – AnimatedDialog.js, hope it will help you in programming stack.
| File Size: | 16.1 KB |
|---|---|
| Views Total: | 2314 |
| 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.
1 |
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> |
2 |
<link href="jquery.animated.dialog.min.css" rel="stylesheet"> |
3 |
<script src="jquery.animated.dialog.min.js"></script> |
2. Create a trigger button to toggle the modal window.
1 |
<button id="demo">Click me!</button> |
3. Add custom content to the modal following the markup structure like so.
1 |
<div class="animated-dialog-content"> |
2 |
<div class="animated-dialog-header"> |
3 |
<div class="animated-dialog-title">Animated Dialog</div> |
4 |
<div class="animated-dialog-close">×</div> |
5 |
</div> |
6 |
<div> |
7 |
Some content goes here |
8 |
</div> |
9 |
</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.
1 |
$("#my-animated-dialog").animatedDialog(); |
5. Configuration options with default values.
01 |
$("#my-animated-dialog").animatedDialog({ |
02 |
03 |
// Selector for modal content |
04 |
"content" : "~ .animated-dialog-content", |
05 |
06 |
// Selector for close button |
07 |
"closeable" : ".animated-dialog-close", |
08 |
09 |
// The minimum width of the modal in px |
10 |
"width" : 800, |
11 |
12 |
// The minimum height of the modal in px |
13 |
"height" : 600, |
14 |
15 |
// The background color for the modal |
16 |
// Can be an <object> with start and end colours. |
17 |
// Useful if you have a different coloured button to the background of your dialog |
18 |
// e.g. |
19 |
// "background": { |
20 |
// "start": "#1565C0", |
21 |
// "end": "#fff" |
22 |
// } |
23 |
"background" : "#fff", |
24 |
25 |
// The animation tween, can be either a <string> or <function> |
26 |
// <string> value options are "centerExpand", "topExpand", "bottomExpand", "leftExpand", "rightExpand" |
27 |
// <function> return <array> of <object>s, each element is a stage in the tween. |
28 |
// Possible values to tween are top, left, width, height and backgroundColor |
29 |
// Passed parameters to the function are |
30 |
// <object> - container element of the dialog |
31 |
// <object> - the start tween parameters |
32 |
// <object> - the end tween parameters, this object should be included as the last element in the array |
33 |
// |
34 |
// e.g. |
35 |
// "tween": function(container, start, end) { |
36 |
// return [{ |
37 |
// "left" : (container.width / 2) - (start.width / 2), |
38 |
// "top" : (container.height / 2) - (start.height / 2) |
39 |
// }, end]; |
40 |
// } |
41 |
"tween" : "centerExpand" |
42 |
|
43 |
}); |
This awesome jQuery plugin is developed by georgelee1. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
