标签：
<!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对话框</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; } </style> </head> <body> <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog</button> <button class="btn demo-2">Prompt Dialog</button> <button class="btn demo-3">Prompt Dialog</button> </div> <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-2.2.1.min.js"></script> <script type="text/javascript" src="http://hovertree.com/texiao/jquery/34/js/jquery.gDialog.js"></script> <script type="text/javascript"> $(‘.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对话框", animateIn: "bounceIn", animateOut: "bounceOut" }); }); $(‘.demo-2‘).click(function(){ $.gDialog.prompt("Your website", "hovertree.com", { title: "Prompt对话框", required: true, animateIn : "rollIn", animateOut: "rollOut" }); }); $(‘.demo-3‘).click(function(){ $.gDialog.confirm("Are You Sure?", { title: "Confirm对话框", animateIn : "bounceInDown", animateOut: "bounceOutUp" }); }); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/caidupingblogs/p/5411859.html
