<!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://files.cnblogs.com/files/caidupingblogs/normalize.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/animate.min.css"> <link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/jquery.gDialog.css"> <style> button { border: 0; } .container { margin: 50px auto; max- 728px; text-align: center; font-family: Arial; } .btn { background-color: #00B2EE; color: #000000; padding: 20px; margin: 10px 30px; border-radius: 5px; border-bottom: 3px solid; } </style> </head> <body> <div class="container"> <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://files.cnblogs.com/files/caidupingblogs/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery.gDialog.js"></script> <script type="text/javascript"> $('.demo-1').click(function(){ $.gDialog.alert("http://www.cnblogs.com/caidupingblogs/", { title: "Alert对话框", animateIn: "bounceIn", animateOut: "bounceOut" }); }); $('.demo-2').click(function(){ $.gDialog.prompt("Your website", "http://www.cnblogs.com/caidupingblogs/", { title: "Prompt对话框", required: true, animateIn : "rollIn", animateOut: "rollOut" }); }); $('.demo-3').click(function(){ $.gDialog.confirm("http://www.cnblogs.com/caidupingblogs/", { title: "Confirm对话框", animateIn : "bounceInDown", animateOut: "bounceOutUp" }); }); </script> </body> </html>