基于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属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
javascript事件冒泡实例分析
May 13 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 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
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python实现简单名片管理系统
2018/11/30 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
Python实现Linux监控的方法
2019/05/16 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
浅谈Python3中print函数的换行
2020/08/05 Python
python能做哪些生活有趣的事情
2020/09/09 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
美国NBA官方商店:NBA Store
2019/04/12 全球购物
消防战士优秀事迹材料
2014/02/13 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
感恩父母主题班会
2015/08/12 职场文书