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

转载 2016年06月01日 09:29:54
  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>  

Jquery自定义alert_confirm

  • 2016年06月30日 18:34
  • 5KB
  • 下载

jquery自定义对话框alert、confirm和prompt

转自:http://blog.csdn.net/donghongbz/article/details/30063463 jQuery Alert Dialogs,又一个基...

jquery自定义对话框alert、confirm和prompt

 jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert、Confirm、prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定...

javascript自定义可连续调用,连续弹出的alert、confirm

     最近有个需求要改掉原来所有的alert窗口,改成一种自定义样式的窗口,找了下,关于alert,confirm重载的实现在网上有一大堆,但都有一个共同的缺点,就是无法连续调用,连续弹窗,也就是...

如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框

如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框 本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用,效果大气漂亮且很...

自定义alert和confirm

var common = {}; common.showAlert = function (msg) { var html = ""; html+=""; html+=""; ...

Javascript中的window对象基本属性和方法以及对alert,confirm,prompt的使用

之前一直对BOM的东西一知半解,最近又拿起js的书来进一步学习下关于BOM的各种对象。 BOM的对象主要有: window对象:客户端Javascript中的顶级对象 navigator对象:包含客户...

自定义弹出框样式 alert修改

  • 2017年08月08日 17:24
  • 2KB
  • 下载

自定义提示框(alert、confirm 可自定义标题 内容 图标 取消按钮)

来自:http://www.cnblogs.com/IT-Bear/archive/2012/05/23/2514752.html 声明:本例子是基于自定义confirm对话框 做的修改 效果...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootbox自定义dialog、confirm、alert样式,以及基本设置方法setDefaults中可用参数
举报原因:
原因补充:

(最多只允许输入30个字)