漂亮的弹出框，javascript库bootbox介绍

传统的javascript的警告框、确认框、提示框：

警告框确认框提示框functionf1(){alert('欢迎来到蚂蚁学Python！')}functionf2(){varr=confirm("请按下列的按钮：");if(r===true){alert('这是点击确认后执行的警告框');}else{alert('这是点击取消后执行的警告框');}}functionf3(){varr=prompt("谁的Python课程最好？","蚂蚁老师");if(r!=null){alert(r+'的Python课程最好了！');}}

以上原生的弹出框，样式和功能受制于浏览器，不利于炫酷狂拽的开发。

bootbox

官方网站：http://bootboxjs.com/

留意，官网的cdnjs链接可能失效。

依赖：这个库依赖于bootstrap、jquery，须按顺序导入文件中，基本框架如下：

这个库可以根据官方文档，设置弹出框的大小、位置、语言等，我用以下2个按钮及其代码演示：

在写元素的地方插入bootstrap风格的按钮：

警告框确认框

在写js代码的地方插入jquery风格的语句：

$("#btn1").click(function(){bootbox.alert({title:'警告框的标题',message:'警告框的内容'})})$("#btn2").click(function(){bootbox.confirm({centerVertical:true,size:'large',locale:'zh-CN',closeButton:false,title:'确认框的标题',message:'确认框的内容',callback:function(result){alert("传给回调函数的是："+result)}})})

你会得到以下2个弹出框：

另外很有用的是，bootbox.prompt，提示框内，除了原生的一个文本框外，还可以改为数字、密码、邮箱、单选、复选、下拉框等，这里就不展开了。

自定义弹出框

最后分享一下自定义按钮的弹出框。

在写元素的地方插入bootstrap风格的按钮：

自定义框

在写js代码的地方插入jquery风格的语句：

$("#btn3").click(function(){bootbox.dialog({title:'自定义框的标题',message:"
这个位置都可以是html语言
红色按钮的returnfalse使得弹出框屹立不倒
",buttons:{red:{label:"红色按钮",className:'btn-danger',callback:function(){alert('你点击了红色按钮')returnfalse}},blue:{label:"蓝色按钮",className:'btn-primary',callback:function(){alert('你点击了蓝色按钮')}},green:{label:"绿色按钮",className:'btn-success',callback:function(){alert('你点击了绿色按钮')}}}})})

于是有了：

标题、内容、每个按钮的标签、样式、回调函数都可以自定义，这样弹窗不就灵活多端了！