基于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中的作用域链和闭包
Jun 30 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
layui导航栏实现代码
May 19 Javascript
实例教学如何写vue插件
Nov 30 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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
图象函数中的中文显示
2006/10/09 PHP
杏林同学录(六)
2006/10/09 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
高中生学习的自我评价
2013/12/14 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
环保建议书400字
2014/05/14 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书