Home >Web Front-end >JS Tutorial >Implementing a cool pop-up dialog with animated effects based on jQuery (with source code download)_jquery
This is a pop-up dialog plug-in based on jQuery. The biggest feature of this jQuery dialog plug-in is that both pop-up and closing have very cool animation effects, such as rotating and flying in, up and down jittering and flying in, etc. The rendering is as follows:
Effect demonstration Source code download
html code:
<div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog Box</button> <button class="btn demo-2">Prompt Dialog Box</button> <button class="btn demo-3">Prompt Dialog Box</button> </div> <script src="src/jquery.js"></script> <script src="src/jquery.gDialog.js"></script> <script> $('.demo-1').click(function(){ $.gDialog.alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero erat, scelerisque sit amet dolor nec, euismod feugiat massa.", { title: "Alert Dialog Box", animateIn: "bounceIn", animateOut: "bounceOut" }); }); $('.demo-2').click(function(){ $.gDialog.prompt("脚本之家", <a href="http://www.jb51.net">www.jb51.net</a>, { title: "Prompt Dialog Box", required: true, animateIn : "rollIn", animateOut: "rollOut" }); }); $('.demo-3').click(function(){ $.gDialog.confirm("Are You Sure?", { title: "Confirm Dialog Box", animateIn : "bounceInDown", animateOut: "bounceOutUp" }); }); </script>
The above is the cool pop-up dialog box with animation effect based on jQuery introduced by the editor (source code download included). I hope it will be helpful to everyone!