bootstrap的弹出框
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>bootbox自定义dialog、confirm、alert样式，基本全局设置方法setDefaults</title> 7 <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 8 <style> 9 .btn-myStyle { 10 background-color: #2c3e50; 11 color: #fff; 12 } 13 14 .btn-myStyle:hover, .btn-myStyle:focus { 15 color: #fff; 16 text-decoration: none; 17 } 18 </style> 19 </head> 20 <body> 21 <button id="test" class="btn btn-default">测试</button> 22 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 23 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 24 <script src="http://bootboxjs.com/bootbox.js"></script> 25 <script> 26 $(document).ready(function() { 27 //bootbox.setDefaults({ 28 /** 29 * @optional String 30 * @default: en 31 * which locale settings to use to translate the three 32 * standard button labels: OK, CONFIRM, CANCEL 33 */ 34 //locale: "fr", 35 /** 36 * @optional Boolean 37 * @default: true 38 * whether the dialog should be shown immediately 39 */ 40 //show: true, 41 /** 42 * @optional Boolean 43 * @default: true 44 * whether the dialog should be have a backdrop or not 45 */ 46 //backdrop: true, 47 /** 48 * @optional Boolean 49 * @default: true 50 * show a close button 51 */ 52 //closeButton: true, 53 /** 54 * @optional Boolean 55 * @default: true 56 * animate the dialog in and out (not supported in < IE 10) 57 */ 58 //animate: true, 59 /** 60 * @optional String 61 * @default: null 62 * an additional class to apply to the dialog wrapper 63 */ 64 //className: "my-modal" 65 //}); 66 }); 67 68 69 $(document).on("click", "#test", function (e) { 70 //bootbox.confirm("Hello world!", function (result) { 71 // if(result) { 72 // alert('点击了确认按钮'); 73 // } else { 74 // alert('点击了取消按钮'); 75 // } 76 //}); 77 //bootbox.dialog({ 78 // message: "I am a custom confirm", 79 // title: "Confirm title", 80 // buttons: { 81 // Cancel: { 82 // label: "Cancel", 83 // className: "btn-default", 84 // callback: function () { 85 // alert("Cancel"); 86 // } 87 // } 88 // , OK: { 89 // label: "OK", 90 // className: "btn-primary", 91 // callback: function () { 92 // alert("OK"); 93 // } 94 // } 95 // } 96 //}); 97 98 //bootbox.confirm({ 99 //buttons: { 100 // confirm: { 101 // label: '我是确认按钮', 102 // className: 'btn-myStyle' 103 // }, 104 // cancel: { 105 // label: '我是取消按钮', 106 // className: 'btn-default' 107 // } 108 //}, 109 //message: '提示信息', 110 //callback: function(result) { 111 // if(result) { 112 // alert('点击确认按钮了'); 113 // } else { 114 // alert('点击取消按钮了'); 115 // } 116 //}, 117 //title: "bootbox confirm也可以添加标题哦", 118 //}); 119 120 bootbox.alert({ 121 buttons: { 122 ok: { 123 label: '我是ok按钮', 124 className: 'btn-myStyle' 125 } 126 }, 127 message: '提示信息', 128 callback: function() { 129 alert('关闭了alert'); 130 }, 131 title: "bootbox alert也可以添加标题哦", 132 }); 133 }); 134 135 </script> 136 </body> 137 </html>