基于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 DIV弹出效果实现代码
Jul 03 Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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开发者事半功倍的十大技巧小结
2010/04/20 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
javascript代码加载优化方法
2011/01/30 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
详解python3中tkinter知识点
2018/06/21 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
How TDD works
2012/09/30 面试题
资产评估专业大学生求职信
2013/09/29 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
会走路的树教学反思
2014/02/20 职场文书
初二学习计划书范文
2014/04/27 职场文书
还款承诺书范文
2014/05/20 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang