Question

我在这段代码中有2个模态弹出窗口。如何使用第二个弹出模式上的关闭按钮关闭第一个和第二个模态。

<button class="btn btn-default"><a href="#" data-toggle="modal" data-target="#myModal">Open First Modal</a></button>
        <div class="modal fade reply-sure" id="myModal">
          <div class="modal-dialog  modal-lg">
            <div class="modal-content">
              <div class="modal-header bg-default">
                <h4 class="modal-title">First Modal</h4>
              </div>
              <div class="modal-body">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Open Second</button>
                <button type="button" class="btn btn-info"  data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal fade reply-sure" id="myModal2">
          <div class="modal-dialog  modal-lg">
            <div class="modal-content">
              <div class="modal-header bg-default">
                <h4 class="modal-title">Second Modal</h4>
              </div>
              <div class="modal-body">
                <button type="button" class="btn btn-danger"  data-dismiss="modal">Close all</button>
              </div>
            </div>
          </div>
        </div>

Answer 1

您可以使用$('#myModal, #myModal2').modal('hide');。

http://jsfiddle.net/L5o2pm1g/

Answer 2

Bootstrap使您可以访问模态函数的额外内容。你所要做的就是用jQuery选择它，然后告诉它该怎么做。请参阅下面的代码段。

function closeAll() {
  $('#myModal, #myModal2').modal('hide');
}

<button type="button" class="btn btn-danger" data-dismiss="modal" onClick="closeAll()">Close all</button>

如何使用最后一个弹出模式上的关闭按钮关闭多个引导模态

2 个答案: