炫酷的jQuery对话框插gDialog
2016-03-09 19:41
627 查看
js有alert,prompt和confirm对话框,不过不是很美体验也不是很好,用jQuery也能实现,
体验效果:http://hovertree.com/texiao/jquery/34/
代码如下:
js题目:http://hovertree.com/tiku/bjaf/k44bgls5.htm
web前端汇总:/article/4797642.html
体验效果:http://hovertree.com/texiao/jquery/34/
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>炫酷的jQuery对话框插件 gDialog - 何问起</title><base target="_blank" /> <link href="http://hovertree.com/texiao/jquery/34/css/normalize.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://hovertree.com/texiao/jquery/34/css/animate.min.css"> <link rel="stylesheet" href="http://hovertree.com/texiao/jquery/34/css/jquery.gDialog.css"> <style> button { border: 0; } .container { margin: 50px auto; max-width: 728px; text-align: center; font-family: Arial; } .btn { background-color: #ED5565; color: #fff; padding: 20px; margin: 10px 30px; border-radius: 5px; border-bottom: 3px solid #DA4453; }a{color:darkslateblue;} </style> </head> <body> <div style="width:310px;margin:0px auto;"> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/4132lshc.htm">原文</a></div> <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert对话框</button> <button class="btn demo-2">Prompt对话框</button> <button class="btn demo-3">Prompt对话框</button> </div> <script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.1.min.js"></script> <script src="http://hovertree.com/texiao/jquery/34/js/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对话框 by 何问起", animateIn: "bounceIn", animateOut: "bounceOut" }); }); $('.demo-2').click(function () { $.gDialog.prompt("Your website", "hovertree.com", { title: "Prompt对话框 by 何问起", required: true, animateIn: "rollIn", animateOut: "rollOut" }); }); $('.demo-3').click(function () { $.gDialog.confirm("Are You Sure?", { title: "Confirm对话框 by 何问起", animateIn: "bounceInDown", animateOut: "bounceOutUp" }); }); </script> </body> </html>
js题目:http://hovertree.com/tiku/bjaf/k44bgls5.htm
web前端汇总:/article/4797642.html
相关文章推荐
- 用jQuery创建HTML中不存在的标签元素碰到的问题
- JSON和JSONP (含jQuery实例)(share)
- 记录-Jquery uploadify文件上传实例
- jquery checkbox checked
- jquery 获取图片大小
- 【error】jQuery.ajax()报错Uncaught SyntaxError: Unexpected token
- jQuery对象相互转换成DOM对象
- jQuery中 end(); 的用法
- jquery.validate.js常用扩展函数
- jQuery 根据JSON数据动态生成表格
- Ajax
- 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例
- jquery checkbox 全选 全不选 反选
- HTML5:多文件上传 Upload multiple files at once with HTML5, jQuery and PHP
- jQuery全屏滚动插件fullPage.js
- jQuery的动画效果
- php ajax json jquery 记录
- jquery如何判断checkbox(复选框)是否被选中
- jQuery操作select下拉框的text值和value值的方法
- <学习笔记> jQuery.extend 函数详解