基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
作者:bea
这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入、上下抖动飞入等。效果图如下: 效果演示源码下载 html代码: <div class="container"><h1>jQuery gDialog Plugin Exampels</h1><button class="btn demo-1">Alert Dialog Box</but
这是一款基于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("", , {
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实现带动画效果超炫酷的弹出对话框(附源码下载),希望对大家有所帮助!
有用 | 无用
效果演示 源码下载
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("", , {
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实现带动画效果超炫酷的弹出对话框(附源码下载),希望对大家有所帮助!
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jQuery实现返回顶部功能
- JavaScript添加随滚动条滚动窗体的方法
- 理解javascript定时器中的单线程
- 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
- 教你如何终止JQUERY的$.AJAX请求
- JQUERY的AJAX请求缓存里的数据问题处理
- javascript每日必学之多态
- javascript每日必学之继承
- JS实现的仿QQ空间图片弹出效果代码
- 理解javascript封装
- 学习Javascript面向对象编程之封装
- javascript每日必学之封装
- jQuery常用知识点总结以及平时封装常用函数
- 使用Javascript实现选择下拉菜单互移并排序
- jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
- JavaScript tab选项卡插件实例代码
- Javascript技术栈中的四种依赖注入详解
- JQuery+EasyUI轻松实现步骤条效果
- 全面解析Bootstrap布局组件应用