單擊關閉按鈕將關閉所有引導程序 model

Question

對於這些代碼，有一個按鈕“Launch modal”來打開 Model，然后在 Model 中，還有一個按鈕“Launch modal2”可以在 ZA559B87068921EEC7840Z 上打開一個新模型（只需調用 model2）。
當我單擊模型 2 上的關閉按鈕時，所有 Model 都將關閉。 我該如何解決？
請注意，我需要將 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>

Answer 1

問題是您將第二個模態放在第一個模態中。 Bootstrap 只會關閉關閉按鈕所在的所有模式，因此如果您嵌套它們，第二個關閉按鈕將關閉所有外部模式。
要解決此問題，您只需將整個div#myModal2向下移動到第一個div#myModal下，這樣它們就是單獨的元素。 像這樣： http://jsfiddle.net/e92o1j3s/3/