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

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

 

  1. bootbox.dialog生成的弹出框是异步执行的,有办法设置成同步执行吗?因为打算代替alert

    • 这个和alert是一样的啊~ 可能你放ajax里了吧? 具体看你怎么写了~

  2. 楼主你好,请问message:$(“#obj”).clone(); 可行么?我试了下怎么不行呢。div的内容不出来。

  3. 给博主一个建议: 不要把html放到message里面,可以message:$(“#obj”).clone(); 也没显得更干练精简!