单击关闭按钮将关闭所有引导模型答案

【问题标题】：Click the close button will close all bootstrap model单击关闭按钮将关闭所有引导模型
【发布时间】：2021-07-11 08:08:32
【问题描述】：

对于那些代码，有一个“启动模式”按钮来打开模型，然后在模型中，也有一个按钮“启动模式2”来打开一个新模型（只需调用模型2）在模型上。
当我单击模型 2 上的关闭按钮时，所有模型都将关闭。我该如何解决这个问题？
请注意，我需要将 model2 放入 Model 中以显示数据。
谢谢。
http://jsfiddle.net/ve42xs6w/

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
          <br>
          <br>
          <br>
          <br>
          <br>
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal2</a>
          <div class="modal" id="myModal2" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Second Modal title</h4>
                  </div><div class="container"></div>
                  <div class="modal-body">
                    Content for the dialog / modal goes here.
                  </div>
                  <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>

【问题讨论】：

标签： javascript html jquery vue.js bootstrap-4

【解决方案1】：

问题是您将第二个模态放在第一个模态中。 Bootstrap 只会关闭关闭按钮所在的所有模式，因此如果您嵌套它们，第二个关闭按钮将关闭所有外部模式。
要解决此问题，您只需将整个 div#myModal2 向下移动到第一个 div#myModal 下，这样它们就是单独的元素。像这样：http://jsfiddle.net/e92o1j3s/3/

【讨论】：