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


Posted in Javascript onFebruary 22, 2016

这是一款基于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("三水点靠木", 3water.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>

以上所述是小编给大家介绍的基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载),希望对大家有所帮助!

Javascript 相关文章推荐
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
JavaScript function函数种类详解
Feb 22 #Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 #Javascript
jQuery获取字符串中出现最多的数
Feb 22 #Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 #Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 #Javascript
javascript实现一个简单的弹出窗
Feb 22 #Javascript
Js的Array数组对象详解
Feb 22 #Javascript
You might like
PHP中的超全局变量
2006/10/09 PHP
深入php多态的实现详解
2013/06/09 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
php接口技术实例详解
2016/12/07 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
Python 流程控制实例代码
2009/09/25 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python实现随机漫步算法
2018/08/27 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
工程管理英文求职信
2014/03/18 职场文书
中专生自荐信
2014/06/25 职场文书
工伤事故证明
2014/10/20 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
2015年加油站工作总结
2015/05/13 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书