bootbox自定义dialog、confirm、alert样式，以及基本设置方法setDefaults中可用参数

于 2014-12-30 17:12:30 发布
阅读量2.3w 收藏 1
点赞数
分类专栏： 前端技术


http://blog.youkuaiyun.com/zh921112/article/details/41513161


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

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值