源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

  • 时间:2020-07-31 06:37 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入、上下抖动飞入等。效果图如下: [img]http://files.jb51.net/file_images/article/201602/2016222143644161.png?201612214378[/img] [url=http://demo.jb51.net/js/2016/jquery-dialog-animation][b]效果演示[/b] [/url]    [b][url=http://xiazai.jb51.net/201509/yuanma/jquery-dialog-animation(jb51.net).rar]源码下载[/url][/b] [b]html代码: [/b]
<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("编程素材网", [url=http://www.1sucai.cn]www.1sucai.cn[/url], {
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>
以上所述是小编给大家介绍的基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载),希望对大家有所帮助!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部