巧妙解决Bootstrap中lay控件确认弹出框不关闭问题

1、开发前景:给弹出的重置密码的layer层加一层确认提示,直接想到了使用larer控件的confirm方法,废话少说,前端部分代码 如下:

/**
 * 点击重置密码
 * @author 研发部-sunwh 2018-07-19
 * @param  {[type]} enterCode [企业代码]
 * @return {[type]}           [description]
 */
function reset(enterCode) {

	layer.confirm('确定重置企业登录密码?', {
		btn : [ '确定', '取消' ]
	}, function(index) {
		
		layer.open({
	        type: 2,
	        title: '随机新密码',
	        maxmin: true,
	        shadeClose: false, // 点击遮罩关闭层
	        area: ['400px', '260px'],
	        btn: ['确认', '关闭'], //按钮
	        content: prefix + '/modifypassword/' + enterCode, // iframe的url
	        yes: function(index, layero){
	       	 	
	       	 	// window.location = '/logout';
	        	layer.close(index); //如果设定了yes回调,需进行手工关闭
    		}
    	});
	})
}

2、结果在实际开发中遇到点击layer控件的确认按钮后,处理完业务,居然发现弹出框还是提醒转态,并没有随着第二层提示框关闭而关闭,但我的意图是:无论用户点击确认或者取消按钮后,弹出框都将关闭。。

第一层弹出框:

巧妙解决Bootstrap中lay控件确认弹出框不关闭问题_第1张图片

第二层弹出框:

巧妙解决Bootstrap中lay控件确认弹出框不关闭问题_第2张图片

3、于是查阅相关资料发现是没有进行自动关闭的原因,调用layer.close(index)方法便可以实现关闭之前的弹出层

function reset(enterCode) {

	layer.confirm('确定重置企业登录密码?', {
		btn : [ '确定', '取消' ]
	}, function(index) {
		
		layer.open({
	        type: 2,
	        title: '随机新密码',
	        maxmin: true,
	        shadeClose: false, // 点击遮罩关闭层
	        area: ['400px', '260px'],
	        btn: ['确认', '关闭'], //按钮
	        content: prefix + '/modifypassword/' + enterCode, // iframe的url
	        yes: function(index, layero){
	       	 	
	       	 	// window.location = '/logout';
	        	layer.close(index); //如果设定了yes回调,需进行手工关闭
    		}
    	});
    	layer.close(index)
	})
}

这样,就大功告成了。

你可能感兴趣的:(Java前端)