基于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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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手册及PHP编程标准
2006/12/17 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
学习python (2)
2006/10/31 Python
Python构造函数及解构函数介绍
2015/02/26 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
发布你的Python模块详解
2016/09/15 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
python属于解释型语言么
2020/06/15 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
如何使用Python调整图像大小
2020/09/26 Python
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
大学生自我鉴定书
2014/03/24 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL