基于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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
js的逻辑运算符 ||
May 31 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
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设计模式之调解者模式的深入解析
2013/06/13 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
php实现zip文件解压操作
2015/11/03 PHP
详解YII关联查询
2016/01/10 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python中解析json格式文件的方法示例
2017/05/03 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
详解python如何引用包package
2020/06/07 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
python实现数字炸弹游戏
2020/07/17 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
七年级音乐教学反思
2014/01/26 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS