基于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 相关文章推荐
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
使用php4加速网络传输
2006/10/09 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python+logging+yaml实现日志分割
2019/07/22 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
解析Python3中的Import
2019/10/13 Python
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
秘书英文求职信范文
2014/01/31 职场文书
中学生自我鉴定
2014/02/04 职场文书
书香校园活动方案
2014/02/28 职场文书
应届生求职信
2014/05/31 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
员工年度工作总结2015
2015/05/18 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python