基于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 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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自定义session示例分享
2014/04/22 PHP
两款万能的php分页类
2015/11/12 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
Python微信库:itchat的用法详解
2017/08/14 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
使用Python实现简单的服务器功能
2017/08/25 Python
Python制作词云的方法
2018/01/03 Python
简单了解django文件下载方式
2020/02/10 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
办理居住证介绍信
2014/01/15 职场文书
计划生育工作汇报
2014/10/28 职场文书
2014年教务工作总结
2014/12/03 职场文书
单位推荐信范文
2015/03/27 职场文书
开学第一周值周总结
2015/07/16 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis