open each Bootstrap 3 Modal one after another and not opening all together

Question

I have unlimited modals starting from modal_0.

What I need is when closing one modal another is opened and not all opening together as in following code.

So how can it be solved?

$("#modal_0").on('hidden.bs.modal',function () {
  for(var i = 1; i < 5; i++) {
    $("#modal_"+i).modal({toggle: true, backdrop: 'static',keyboard:false,show:true});
  };
});

Answer 1

I have made you an example with 3 modals using a recursive mechanism , hope this helps you:

 $(document).ready(function() { startRecursiveModalOpening(0); }); function startRecursiveModalOpening(modalID) { var modalOptions = { toggle: true, backdrop: 'static', keyboard: false, show: true }; // Register listener for modal hidden event one time. $("#modal_" + modalID) .modal(modalOptions) .one("hidden.bs.modal", function() { var nextModal = $("#modal_" + (modalID + 1)); if (nextModal.length > 0) startRecursiveModalOpening(modalID + 1); }); } 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <!-- Modal 0 --> <div class="modal fade" id="modal_0" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> MODAL 0 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body">BODY</div> <div class="modal-footer">FOOTER</div> </div> </div> </div> <!-- Modal 1 --> <div class="modal fade" id="modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> MODAL 1 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body">BODY</div> <div class="modal-footer">FOOTER</div> </div> </div> </div> <!-- Modal 2 --> <div class="modal fade" id="modal_2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> MODAL 2 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body">BODY</div> <div class="modal-footer">FOOTER</div> </div> </div> </div> 

Answer 2

Assuming the modal's id has 'modal_' + sequence as pattern, and that the modals should be displayed based on this sequence:

modal_0 ➝ modal_1 ➝ modal_2 ➝ and so on...

Then you could try attaching the event handler like this:

 $('[id^="modal_"]').on('hidden.bs.modal', function () { var nextId = parseInt(this.id.substring(6)) + 1; $("#modal_"+ nextId).modal({ toggle: true, backdrop: 'static', keyboard:false, show:true }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal_0"> Launch demo modal </button> <div id="modal_0" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Modal 0</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div id="modal_1" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Modal 1</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div id="modal_2" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Modal 2</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div id="modal_3" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Modal 3</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div id="modal_4" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Modal 4</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div id="modal_5" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Modal 5</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>