javascript - How can I close multiple bootstrap modals with the close button on the last popped modal - Stack Overflow

admin管理员组

文章数量:1406312

I have 2 modal popups in this code. How can i use the close button on the second popped modal to close the first and the second modal.

<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>

I have 2 modal popups in this code. How can i use the close button on the second popped modal to close the first and the second modal.

<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>

• javascript
• jquery
• twitter-bootstrap
• modal-dialog

Share Improve this question Follow asked Jan 9, 2015 at 16:38 Sowemimo BamideleSowemimo Bamidele 12922 silver badges1414 bronze badges 1

• You can't have multiple modals open simultaneously in Bootstrap in the first place... – cvrebert Commented Jan 10, 2015 at 2:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You could use $('#myModal, #myModal2').modal('hide');.

http://jsfiddle/L5o2pm1g/

Bootstrap gives you access to extra to the modal function. All you have to do is select it with jQuery and then tell it what to do. See the snippet below.

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

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

本文标签：