基于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 text()要注意啦
Oct 30 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
javascript实现简易计算器的代码
May 31 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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读取Excel类文件
2017/05/15 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
vue如何截取字符串
2019/05/06 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
数控专业应届生求职信
2013/11/27 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
工作经历证明书范文
2014/11/02 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers