Bootbox.js 简介
Bootbox.js是一个小型的JavaScript库，基于Twitter的Bootstrap开发，它允许你创建使用编程对话框，方便用户快速创建模态框，Bootbox.js提供了模拟原生JavaScript的alert警告、confirm确认和prompt提示这三个对话框，另外还有dialog自定义对话框，所有的Bootstrap模态框生成的都是非阻塞事件，所以在使用confirm()对话框时，请记住这一点，因为它不是本地确认对话框的替代。
Bootbox.js 主要功能与用法
1、Alert 警告框：只有单个按钮的对话框，按ESC键或单击关闭按钮可关闭对话框。
基本用法：bootbox.alert("Your message here…")
带回调函数：bootbox.alert("Your message here…", function(){ /* your callback code */ })
自定义选项：bootbox.alert({ size: "small", title: "Your Title", message: "Your message here…", callback: function(){ /* your callback code */ } })
2、Confirm 确认框：具有确定和取消按钮的对话框，按ESC键或单击关闭将忽略对话框并调用回调函数，效果等同于单击取消按钮。
基本用法：bootbox.confirm("Are you sure?", function(result){ /* your callback code */ })
自定义选项：bootbox.confirm({ size: "small", message: "Are you sure?", callback: function(result){ /* result is a boolean; true = OK, false = Cancel*/ } })
3、Prompt 提示框：提示用户进行输入操作并确定或者取消的对话框，按ESC键或单击关闭将忽略对话框并调用回调函数，效果等同于单击取消按钮。
基本用法：bootbox.prompt("What is your name?", function(result){ /* your callback code */ })
自定义选项：bootbox.prompt({ size: "small", title: "What is your name?", callback: function(result){ /* result = String containing user input if OK clicked or null if Cancel clicked */ } })
4、Custom Dialog 自定义对话框：一个完全自定义的对话框方法，它只接收一个参数 options对象。
基本用法：bootbox.dialog({ message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>' })
Bootbox.js 常见问题及解决方案
1、版本兼容性问题：Bootbox.js的所有版本都是在Bootstrap和jQuery的基础之上的，因此bootstrap，jQuery和Bootbox的版本要对应。
2、脚本引用顺序问题：注意脚本引用的顺序，应为jQuery、Bootstrap、Bootbox。
3、模态框非阻塞事件：在使用confirm()对话框时，请记住这一点，因为它不是本地确认对话框的替代。
相关问题与解答
问：Bootbox.js 如何设置弹出框为中文提示？
答：在Bootbox.js中，可以通过自定义选项来设置弹出框的语言为中文，在prompt提示框中，可以设置title选项为中文标题，如"请输入您的姓名"。
问：Bootbox.js 弹出框如何设置为垂直居中？
答：可以通过CSS样式来设置Bootbox.js弹出框的垂直居中，可以使用以下代码将警告框设置为垂直居中：
bootbox.alert('Danger!!').find('.modal-content').css({
'background-color': '#f99',
'font-weight': 'bold',
'color': '#F00',
'font-size': '2em',
'margin-top': function () {
var w = $(window).height();
var b = $(".modal-dialog").height();
var h = (w b) / 2;
return h + "px";
}
});
以上内容就是解答有关“bootbox.js干嘛用的”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/698599.html
微信扫一扫 