基于jQuery带动画的超炫酷弹出对话框
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于jQuery带动画的超炫酷弹出对话框相关的知识,希望对你有一定的参考价值。
这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入、上下抖动飞入等。效果图如下:
实现的代码。
html代码:
<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("站长素材", "sc.chinaz.com", { 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>
via:http://www.w2bc.com/article/90238
以上是关于基于jQuery带动画的超炫酷弹出对话框的主要内容,如果未能解决你的问题,请参考以下文章
如何通过onclick list项打开带动画的alertdialog? [关闭]