BootstrapDialog.dialogs关闭指定层的弹出框

页面一：

点击新增黑名单，调用方法弹出窗口：

<button class="btn btn-sm btn-success" οnclick="javascript:addDetailInfo('${base!}/admin/api/wall/add?csrf=${csrf!}','黑名单','api-blacklist-form-add');">
<i class="fa fa-plus"> </i>新增黑名单
</button>

function addDetailInfo(url,title,formId,cssClasses){
	var $that = $(this); 
	var formUrl = url;
	if(url.indexOf("?")!=-1){
		formUrl = url.substring(0,url.indexOf("?"))+"/form";
	}else{
		formUrl = url+"/form";
	}
	//失效
	$that.attr("disabled","disabled"); 
	// 调用add方法
	var dialog = BootstrapDialog.show({
   	        type : BootstrapDialog.TYPE_DEFAULT,
   	        title : "<span class='text-success'><i class='fa fa-plus'></i> 新增</span>"+title,
   	        closable: false,
            draggable: true,
            cssClass: cssClasses,
  	        message:$('<div></div>').load(url),//加载弹出页面
  	        size : BootstrapDialog.SIZE_WIDE,//弹出框大小。
   	        onhide:function(){
   	        	$that.removeAttr("disabled"); 
   	        },
   	        buttons : [ {
   	        	  id: 'btn-form-submit',
                  label: '提交',
                  icon: 'fa fa-check-circle',
                  cssClass: 'btn-primary',
                  action: function(dialogRef){
                	 var $button = this;
                  	 //表单验证并提交
                  	 $('#'+formId).unbind("valid.form");
                  	 $('#'+formId).bind('valid.form', function(e, form){
                  		// Before submitting the form, hold form, to prevent duplicate submission.
                  		//$(form).holdSubmit();
                  		$button.disable();
                  		$.ajax({  
	                            type:'post',      
	                            url:formUrl,  
	                            data:$("#"+formId).serialize(),//序列化表格内容为字符串  
	                            cache:false,  
	                            dataType:'json',  
	                            success:function(data){  
	                            	// After the form is submitted successfully, release hold.
	                            	//$(form).holdSubmit(false);
	                            	$button.enable();
	                            	BootstrapDialog.alertSuccess("提交成功!",function(){
	                            		//当前页面刷新
	                                	window.location.reload();
	                            	});
	                            	dialog.close();
	                            },
	                            error:function(error){
	                            	$button.enable();
	                            	BootstrapDialog.alertError("提交失败!");
	                            }
	                    });
                  	});
                  	//提交表单
                  	$('#'+formId).trigger("submit");
                  }
              },{
   	            label : '关闭',
   	            icon: 'fa fa-close',
   	            action : function(dialogItself) {
   	                dialogItself.close();
   	            }
   	        } ]
	});
};

点击选择：再次加载弹出框

function chooseAppkey(){
	var $that = $(this); 
	//失效
	$that.attr("disabled","disabled"); 
	// 调用add方法
	var dialog = BootstrapDialog.show({
   	        type : BootstrapDialog.TYPE_DEFAULT,
   	        title : "选择AppKey",
   	        closable: true,
            draggable: false,
  	        message:$('<div  style="height:450px;overflow:auto;"></div>').load('${base!}/admin/api/wall/showappkey?csrf=${csrf!}'),
  	        size : BootstrapDialog.SIZE_WIDE,
   	        onhide:function(){
   	        	$that.removeAttr("disabled"); 
   	        },
   	     	id:"appkeys"
	});
}

点击选择的时候，关闭该层弹出框。将Appkey的值绑定给上一个页面。

function checkButton(key,name){
	$("#appId").val(key);//上一层的表单id
	$.each(BootstrapDialog.dialogs,function(id,dialogs){
		if(id=='appkeys'){//遍历所有的弹出框，关闭制定的一个
			dialogs.close();
		}
	});
}

另外：图二中表单appkey和IP必填一项。nice validate配置：

					<input type="text" id="appId" name="appId" class="form-control contact" 
						data-rule="required(from, .contact); appId"
						data-msg-required="请至少填写一种禁用方式"
						autocomplete="off" value="" placeholder="请输入应用的App Key，选填"/>




提示信息弹出位置：



<span class="msg-box n-right" style="float:right;margin-bottom:25px;" for="appId"></span>
IP表单配置：

<input type="text" name="ip" class="form-control contact"  style="width:90%;"
					data-rule="required(from, .contact); ip"
					data-msg-required=" "
					autocomplete="off" placeholder="请输入IP地址和域名地址,可以不填写">