1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 43

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

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

一、页面概况

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

二、问题点

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

三、解决方法

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

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

  2. 子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");
	}

  3. 父modal一般方式实现即可

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • wireshark抓包分析——TCP/IP协议[通俗易懂]

    wireshark抓包分析——TCP/IP协议[通俗易懂]

    wireshark抓包分析——TCP/IP协议[通俗易懂]本文来自网易云社区当我们需要跟踪网络有关的信息时，经常会说“抓包”。这里抓包究竟是什么？抓到的包又能分析出什么？在本文中以TCP/IP协议为例，简单介绍TCP/IP协议以及如何通过wireshark抓包分析。Wireshark是最著名的网络通讯抓包分析工具。功能十分强大，可以截取各种网络封包，显示网络封包的详细信息。Wireshark下载安装，略。注意，若在Windows系统安装Wireshar…

    全栈程序员-站长的头像 全栈程序员-站长
    2025年9月30日
    5
  • pycharm中文怎么改成英文_pycharm如何设置英文

    pycharm中文怎么改成英文_pycharm如何设置英文

    pycharm中文怎么改成英文_pycharm如何设置英文1、选择右上角file（文件）里的setting（设置）2、点击Pulgins，搜索chinese3、找到chinese（simplified）languagepack/中文语言包，一般是搜索里的第一个或第二个4、点击绿色按钮“restartIDE”,在弹出的对话框了选restart，结束。…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月28日
    3
  • GoLand 2021.12.12激活[最新免费获取] idea

    GoLand 2021.12.12激活[最新免费获取]

    (GoLand 2021.12.12激活)这是一篇idea技术相关文章，由全栈君为大家提供，主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码，破解教程可免费永久激活，亲测有效，下面是详细链接哦~https://javaforall.net/100143.html0BXA05X8YC-eyJsa…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月30日
    47
  • git 修改用户名以及邮箱_163怎么更改账号

    git 修改用户名以及邮箱_163怎么更改账号

    git 修改用户名以及邮箱_163怎么更改账号最近在提交代码时发现用户名和邮箱很长，感觉很奇怪，于是通过Git命令修改了一下用户名，用户名截图如下:修改步骤如下:1.进入Git的安装目录，找到git\git-cmd.exe,例如我的目录是D:\softwore\git\Git，目录截图如下:或者配置环境变量进行修改，环境变量配置为在PATH后面加上git的bin目录D:\softwore\git\Git\bin，截图如下…

    全栈程序员-站长的头像 全栈程序员-站长
    2025年9月30日
    2
  • python qt是什么_初识Python与Qt「建议收藏」

    python qt是什么_初识Python与Qt「建议收藏」

    python qt是什么_初识Python与Qt「建议收藏」Python的3.0版本，在开发阶段被称为Python3000，或简称Py3k。相对于Python的早期版本，这是一个较大的升级。为了不带入过多的累赘，Python3.0在设计的时候就没有考虑向下兼容。许多针对早期Python版本设计的程序都无法在Python3.0上正常运行。为了照顾现有程序，Python2.6作为一个过渡版本，基本使用了Python2.x的语法和库，同时考虑了向Pyt…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月13日
    54
  • DynamnicQuery for BAQ

    DynamnicQuery for BAQ

    DynamnicQuery for BAQ文章转自:https://pastebin.com/9CsF6uEC//DynamnicQueryforBAQ    Epicor.Mfg.Core.SessionepiSession=default(Epicor.Mfg.Core.Session);    epiSession=(Epicor.Mfg.Core.Session)POEntryFor

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月16日
    23

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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