基于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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
python re正则表达式模块(Regular Expression)
2014/07/16 Python
详解Python中的正则表达式的用法
2015/04/09 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
业务员自荐信范文
2014/04/20 职场文书
银行委托书范本
2014/09/28 职场文书
校本研修个人总结
2015/02/28 职场文书
离婚被告代理词
2015/05/23 职场文书
廉洁自律证明
2015/06/24 职场文书
神州牡丹园的导游词
2019/11/20 职场文书