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就可以了。