jquery 美化弹出提示 漂亮的Dialog 对话框
三个不同的效果，分别是普通的警告,确认/取消,带一个输入框
本例用了jquery.alertify.js，请到演示页面查看
css文件也请到演示页面查看
JavaScript Code
- <script type="text/javascript">
- $(document).ready(function() {
- $(".alert").click(function() {
- var message = "<h3>Alert Dialog</h3><p>Example of an <strong>Alert Dialog</strong>. You can put any message over here.</p><br/>";
- alertify.alert(message);
- });
- $(".confirm").click(function() {
- var message = "<h3>Confirm Dialog</h3><p>Do you want to confirm this?</p><br/>";
- alertify.confirm(message, function (e) {
- if(e) {
- alertify.success("You clicked <strong>OK</strong>");
- } else {
- alertify.error("You clicked <strong>Cancel</strong>");
- }
- });
- });
- $(".prompt").click(function() {
- var message = "<h3>Prompt Dialog</h3><p>Please enter a value over here.</p><br/>";
- alertify.prompt(message, function (e, str) {
- if(e) {
- alertify.success("You typed <strong>"+str+"</strong>");
- } else {
- alertify.error("You clicked <strong>Cancel</strong>");
- }
- }, "Enter a value");
- });
- });
- </script>
XML/HTML Code
- <div class="container">
- <ul>
- <li><a href="#" class="alert">警告对话框</a></li>
- <li><a href="#" class="confirm">确认/取消对话框</a></li>
- <li><a href="#" class="prompt">带输入框的对话框</a></li>
- </ul><br/>
- </div>
相关推荐
周公周金桥 2020-09-06
大象从不倒下 2020-07-31
AlisaClass 2020-07-19
MaureenChen 2020-04-21
xingguanghai 2020-03-13
teresalxm 2020-02-18
木四小哥 2013-05-14
SoShellon 2013-06-01
Simagle 2013-05-31
羽化大刀Chrome 2013-05-31
waterv 2020-01-08
LutosX 2013-07-29
vanturman 2013-06-27
wutongyuq 2013-04-12
luoqu 2013-04-10
ChinaWin 2020-08-13
kangtingting0 2020-05-20
MichelinMessi 2020-02-19