<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>bootbox自定义dialog、confirm、alert样式 - 我爱模板网</title> <link href="http://www.5imoban.net/download/css/bootstrap3.3.4.min.css" rel="stylesheet" /> <style> .btn-myStyle{ background-color: #2c3e50; color:#fff} .btn-myStyle:hover,.btn-myStyle:focus{color:#fff;text-decoration: none;} </style> </head> <body> <button id="test" class="btn btn-default">测试</button> <script src="http://www.5imoban.net/download/jquery/jquery-1.11.0.min.js"></script> <script src="http://www.5imoban.net/download/js/bootstrap3.3.4.min.js"></script> <script src="http://www.5imoban.net/view/bootbox/js/bootbox.js"></script> <script> $(document).ready(function() { //bootbox.setDefaults({ /** * @optional String * @default: en * which locale settings to use to translate the three * standard button labels: OK, CONFIRM, CANCEL */ //locale: "fr", /** * @optional Boolean * @default: true * whether the dialog should be shown immediately */ //show: true, /** * @optional Boolean * @default: true * whether the dialog should be have a backdrop or not */ //backdrop: true, /** * @optional Boolean * @default: true * show a close button */ //closeButton: true, /** * @optional Boolean * @default: true * animate the dialog in and out (not supported in < IE 10) */ //animate: true, /** * @optional String * @default: null * an additional class to apply to the dialog wrapper */ //className: "my-modal" //}); }); $(document).on("click", "#test", function (e) { /*bootbox.confirm("Hello world!", function (result) { if(result) { alert('点击了确认按钮'); } else { alert('点击了取消按钮'); } }); bootbox.dialog({ message: "I am a custom confirm", title: "Confirm title", buttons: { Cancel: { label: "Cancel", className: "btn-default", callback: function () { alert("Cancel"); } } , OK: { label: "OK", className: "btn-primary", callback: function () { alert("OK"); } } } }); bootbox.confirm({ buttons: { confirm: { label: '我是确认按钮', className: 'btn-myStyle' }, cancel: { label: '我是取消按钮', className: 'btn-default' } }, message: '提示信息', callback: function(result) { if(result) { alert('点击确认按钮了'); } else { alert('点击取消按钮了'); } }, //title: "bootbox confirm也可以添加标题哦", });*/ bootbox.alert({ buttons: { ok: { label: '我是ok按钮', className: 'btn-myStyle' } }, message: '提示信息', callback: function() { alert('关闭了alert'); }, title: "bootbox alert也可以添加标题哦", }); }); </script> </body> </html>
bootbox自定义dialog、confirm、alert样式
bootbox是一个基于jQuery和bootstrap的弹出框插件,让常见的js弹框,如alert、confirm和prompt更加美观,详见 jquery弹窗插件bootbox.js。本文主要讨论bootbox自定义dialog、confirm、alert样式,以及基本设置方法setDefaults中可用参数。