Bootstrap modal: close current, open new

Question

I have looked for a while, but I can't find a solution for this. I want the following:

• Open an URL inside a Bootstrap modal. I have this working off course. So the content is loaded dynamically.
• When an user pushes a button inside this modal, I want the current modal to hide, and immediately after that, I want a new modal to open with the new URL (which the user clicked on). This content of the 2nd modal is also loaded dynamically.
• If the user then closes that 2nd modal, the first modal must come back again.

I have been staring at this for days, hope someone can help me.

Thanks in advance.

Answer 1

I might be a bit late to this but I think I've found working solution.

Required -

jQuery

All modals with a closing/dismissal button having attributes set as follows -

<button type="button" class="btn close_modal" data-toggle="modal" data-target="#Modal">Close</button>  

Please see the class close_modal added to the button's classes

Now to close all existing modals, we'll call

$(".close_modal").trigger("click");

So, wherever you want to open a modal

Just add the above code and your all open modals shall get closed.

Then add your normal code to open the desired modal

$("#DesiredModal").modal();

Answer 2

I know this is a late answer, but it might be useful. Here's a proper and clean way to get this done, as @karima's mentioned above. You can actually fire two functions at once; trigger and dismiss the modal.

HTML Markup;

<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>

<div class="modal fade" id="SELECTOR" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body"> ... </div>
     <div class="modal-footer">           <!-- ↓ -->  <!--      ↓      -->
      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
     </div>
   </div>
  </div>
</div>

Demo

Answer 3

Without seeing specific code, it's difficult to give you a precise answer. However, from the Bootstrap docs, you can hide the modal like this:

$('#myModal').modal('hide')

Then, show another modal once it's hidden:

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

You're going to have to find a way to push the URL to the new modal window, but I'd assume that'd be trivial. Without seeing the code it's hard to give an example of that.

Answer 4

I use another way:

$('#showModal').on('hidden.bs.modal', function() {
        $('#easyModal').on('shown.bs.modal', function() {
            $('body').addClass('modal-open');
        });
    });

Answer 5

I use this method:

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});

Answer 6

If you want to close the previously opened modal while opening the new modal then you must do it from javascript/jquery by first closing the current open modal and then give a 400ms timeout to allow it to close and then open the new modal like below code :

$('#currentModal').modal('hide');

setTimeout(function() {
       //your code to be executed after 200 msecond 
       $('#newModal').modal({
           backdrop: 'static'//to disable click close
   })
}, 400);//delay in miliseconds##1000=1second

If you try to do it with the data-dismiss="modal" then it will have the scroll issue as mentioned by @gravity and @kuldeep in comments.