Multiple Bootstrap Modals one after another

Question

I am new to bootstrap. I have a situation where I have to Show a Bootstrap Modal, When I click any button on that Modal I'll have to show another modal below that 1st Modal (Not Stackable). If I close the 1st Modal 2nd Modal has to go up to replace the position of 1st Modal.

Is it possible ?

Any help ?

This is pretty doable. Just add the second modal and set its z-index lesser than the previously shown. — vipulsharma, Oct 30 '13 at 07:38
Didn't you ask the same question before? http://stackoverflow.com/questions/19669415/multiple-bootstrap-modals-one-after-another-is-it-possible — Carol Skelly, Oct 30 '13 at 10:36

score 4 · Answer 1 · edited May 23 '17 at 12:28

You can listen to the "close" event of the first model to open the second model:

Bind a function to Twitter Bootstrap Modal Close

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
})

Manually open the second model:

$('#otherModel').modal('toggle')

An example:

Your HTML code:

<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Javascript:

  $('#myModal').on('hidden.bs.modal', function() {
    $('#myModal2').modal("toggle");
  });

i think he meant lining-up underneath, which requires CSS transform to go up. — Daniel Cheung, Oct 30 '13 at 12:28

Multiple Bootstrap Modals one after another

1 Answers1