bootbox自定義dialog、confirm、alert樣式，以及基本設定方法setDefaults中可用引數
阿新 • • 發佈：2018-11-29
<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樣式，基本全域性設定方法setDefaults</title>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
.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://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://bootboxjs.com/bootbox.js"></script>
<script>
//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>
<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樣式，基本全域性設定方法setDefaults</title>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
.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://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://bootboxjs.com/bootbox.js"></script>
<script>
//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>