基于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 相关文章推荐
广告显示判断
Aug 31 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 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 正则匹配函数体
2009/08/25 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
js中this用法实例详解
2015/05/05 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
PHP面试题集
2016/12/18 面试题
《云雀的心愿》教学反思
2014/02/25 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
改造DE1103三步曲
2022/04/07 无线电