bootboxjs demo

最新推荐文章于 2024-03-14 11:53:04 发布

jigsaw

最新推荐文章于 2024-03-14 11:53:04 发布

阅读量344

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发前端开发

本文链接：https://blog.youkuaiyun.com/pintu274111451/article/details/79269117

前端开发同时被 2 个专栏收录

68 篇文章

订阅专栏

前端开发

63 篇文章

订阅专栏

本文介绍如何使用Bootbox库自定义弹窗对话框样式，包括确认框、警告框等，并展示了如何设置全局默认样式及按钮自定义样式的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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" />
<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://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>
$(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>