bootstrap 双层模态窗关闭问题[通俗易懂]

全栈程序员-站长 • 2022年2月16日下午5:12 • 未分类 • 阅读 38

一、页面概况二、问题点点击modal“关闭”按钮后，父modal“关闭”按钮失效点击modal右上角“X”后，父modal会一同关闭三、解决方法重写子modal的hide触发事件hi

大家好，又见面了，我是全栈君。

一、页面概况

bootstrap 双层模态窗关闭问题[通俗易懂]

二、问题点

点击modal “关闭”按钮后，父modal“关闭”按钮失效
点击modal 右上角“X”后，父modal会一同关闭

三、解决方法

重写子modal的hide 触发事件 hide.bs.modal

// modal所在的html 的<body>标签前面加上
$(function(){
		$('#myModal').on('hide.bs.modal', function (e) {
			$("#myModal .modal-body").empty();
		});
	});

子modal “关闭”按钮和右上角“X” 点击都添加onclick方法

<!-- modal 右上角的“X” 添加onclick触发事件的方法 -->
<div class="modal fade" id="myModal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog modal-lg" role="document" style="width:80%">
				<div class="modal-content
					<div class="modal-header">
						<button type="button" class="close" onclick="calloff()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">标题</h4>
					</div>
					<div class="modal-body" id="myModalBody"></div>
				</div>
			</div>
		</div>

//onclick 方法的具体实现，右上角的“X”和“关闭”按钮均调用这个
calloff:function(){
		$("#myModal").modal("hide");
	}

父modal一般方式实现即可

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/120873.html原文链接：https://javaforall.net

赞 (0)

全栈程序员-站长

0 0

优先队列的数据结构_低优先级队列一天只能一场

优先队列的数据结构_低优先级队列一天只能一场目录一.PriorityQueuePriorityQueue简介继承关系PriorityQueue示例二.Comparable比较器Compara接口三.Comparator比较器Comparator接口四.底层原理一.PriorityQueuePriorityQueue简介PriorityQueue，即优先级队列。优先级队列可以保证每次取出来的元素都是队列中的最小或最大的元素<Java优先级队列默认每次取出来的为最小元素&gt.

全栈程序员-站长
2022年9月23日
python lambda表达式 if_Python学习-lambda表达式

python lambda表达式 if_Python学习-lambda表达式lambda只是一个表达式，函数体比def简单很多。lambda的主体是一个表达式，而不是一个代码块。仅仅能在lambda表达式中封装有限的逻辑进去。lambda表达式是起到一个函数速写的作用。允许在代码内嵌入一个函数的定义。#求三个数的和1f=lambdax,y,z:x+y+x2print(f(1,2,3))#434f=lambdax,y,z:x+y+z5print(…

全栈程序员-站长
2022年10月18日
Mysql decimal详解

Mysql decimal详解Mysqldecimal如何定义特点特点一详解如何定义decimal(totalCount,afterCount)参数说明totalCount：数字数量总和afterCount：小数点后数字数量总和特点每4字节存储9位数字，不足9位试具体位数决定占用空间最多存储65位数字，其中小数点前最多占35个，小数点后最多占30小数点占一字节最大空间占用为31字节特点一详解12（9+3）位数字，占6（4+2）位，3位数字最大值为999，1字节(28，256)<999

全栈程序员-站长
2022年7月17日
HTTP代理_gap加盟需要投资多少

HTTP代理_gap加盟需要投资多少2019独角兽企业重金招聘Python工程师标准>>>…

全栈程序员-站长
2022年10月29日
idea

golang 2021.10.3 激活码-激活码分享

(golang 2021.10.3 激活码)好多小伙伴总是说激活码老是失效，太麻烦，关注/收藏全栈君太难教程，2021永久激活的方法等着你。IntelliJ2021最新激活注册码，破解教程可免费永久激活，亲测有效，下面是详细链接哦~https://javaforall.net/100143.html1STL5S9V8F-eyJsaWNlbnNlSW…

全栈程序员-站长
2022年3月27日
点在三维平面上的投影怎么求_直线投影到三维

点在三维平面上的投影怎么求_直线投影到三维已知空间中的任一点：P(x0,y0,z0)P(x_0,y_0,z_0)P(x0,y0,z0)，一个平面 Ax+By+Cz+D=0。\text{一个平面}Ax+By+Cz+D=0。一个平面 Ax+By+Cz+D=0。则平面的法线方向：V2=[A,B,C]\text{则平面的法线方向：}V_2=[A,B,C]则平面的法线方向：V2=[A,B,C]，投影方程为：…

全栈程序员-站长
2022年11月3日

发表回复

关注全栈程序员社区公众号