基于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 相关文章推荐
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
canvas绘制的直线动画
Jan 23 Javascript
js实现网页定位导航功能
Mar 07 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
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
重置版游戏视频
2020/04/09 魔兽争霸
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
语义化 H1 标签
2008/01/14 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python 自动化表单提交实例代码
2017/06/08 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
详解python程序中的多任务
2020/09/16 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
毕业生的自我评价
2013/12/30 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
预备党员公开承诺书
2014/05/28 职场文书
股权转让协议范本
2014/12/07 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
门卫管理制度范本
2015/08/05 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL