基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2019/6/29 21:47:59
本文主要是介绍基于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("找一找教程网", www.zyiz.net, { 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实现带动画效果超炫酷的弹出对话框(附源码下载)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习