巧妙解决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控件的确认按钮后,处理完业务,居然发现弹出框还是提醒转态,并没有随着第二层提示框关闭而关闭,但我的意图是:无论用户点击确认或者取消按钮后,弹出框都将关闭。。

第一层弹出框:

第二层弹出框:

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)
	})
}

这样,就大功告成了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用和介绍了弹出(popover)是与提示类似的一种组件,用于在鼠标点击元素后显示更多的内容。弹出的用法和提示类似,只需要将data-toggle属性的值从"tooltip"改为"popover",然后在相应的元素上调用popover()方法即可。需要注意的是,弹出的触发动作是单击,而不是鼠标移上。同时,弹出的初始化代码要写在jQuery的初始化代码。提到了可以使用data-trigger="focus"属性来设置在鼠标点击元素外部区域来关闭弹出。这样,当再次点击指定元素外部区域时,弹出关闭。下面是一个示例代码,展示了如何使用bootstrap弹出: ```html <div class="container"> <h3>弹出实例</h3> <br> <a href="#" title="取消弹出" data-toggle="popover" data-trigger="focus" data-content="点击文档的其他地方关闭我">点我</a> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> ``` 在上述代码,我们创建了一个包含标题和一个链接的容器。链接元素上添加了data-toggle="popover"属性,使其成为一个弹出触发器。data-trigger="focus"属性用于设置点击元素外部区域来关闭弹出。最后,在jQuery的初始化代码,调用popover()方法对所有标记了data-toggle="popover"属性的元素进行初始化。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Bootstrap弹出](https://blog.csdn.net/yang5726685/article/details/69220345)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Bootstrap 弹出](https://blog.csdn.net/qq_27870421/article/details/97260000)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值