JS弹出框效果BOOTBOX.JS

JS弹出框效果BOOTBOX.JS

在使用后台模板Ace admin时，我发现一个比较不错的提示框效果。接口很清晰，可以自定义。——Bootbox.js

bootbox的用法非常简单。

制作提示框效果，我们需要的效果，也就是alert警告，info提示，confirm确认，还有一个就是自定义了dialog。

bootbox.alert(message, callback)

bootbox.prompt(message, callback)

bootbox.confirm(message, callback) //返回值为布尔类型，true或false

稍微复杂一点的就是dialog

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

bootbox.dialog({      title : "修改密码" ,      message : "<div class='well ' style='margin-top:25px;'><form class='form-horizontal' role='form'><div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtOldPwd'>旧密码</label><div class='col-sm-9'><input type='text' id='txtOldPwd' placeholder='请输入旧密码' class='col-xs-10 col-sm-5' /></div></div><div class='space-4'></div><div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtNewPwd1'>新密码</label><div class='col-sm-9'><input type='text' id='txtNewPwd1' placeholder='请输入新密码' class='col-xs-10 col-sm-5' /></div></div><div class='space-4'></div><div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtNewPwd2'>确认新密码</label><div class='col-sm-9'><input type='text' id='txtNewPwd2' placeholder='再次输入新密码' class='col-xs-10 col-sm-5' /></div></div></form></div>" ,      buttons : {          "success" : {              "label" : "<i class='icon-ok'></i> 保存" ,              "className" : "btn-sm btn-success" ,              "callback" : function () {                  var txt1 = $( "#txtOldPwd" ).val();                  var txt2 = $( "#txtNewPwd1" ).val();                  var txt3 = $( "#txtNewPwd2" ).val();                    if (txt1 == "" || txt2 == "" || txt3 == "" ){                      bootbox.alert( "密码不能为空" );                      return false;                  }                  if (txt2 != txt3 ){                      bootbox.alert( "两次输入新密码不一致，请重新输入!" );                      return false;                  }                  var info = { "opt" : "changepassword" , "oldpwd" :txt1, "newpwd1" :txt2, "newpwd2" :txt3};                  //$.post("../CommonServlet",info,function(data){                      bootbox.alert( "密码更新成功" );                  //},'json');              }          },          "cancel" : {              "label" : "<i class='icon-info'></i> 取消" ,              "className" : "btn-sm btn-danger" ,              "callback" : function () { }          }      } });

 

还有一点就是，默认是英文的，需要更改为中文。

打开bootbox.js文件，查找locale，在locale会发现有en，把en改成zh-CN就可以了。