标签：
js有alert，prompt和confirm对话框，不过不是很美体验也不是很好，用jQuery也能实现，
体验效果：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前端汇总:http://www.cnblogs.com/jihua/p/webfront.html
标签：
原文地址：http://www.cnblogs.com/jihua/p/jqdhk.html
