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

Answer 1

It's not exactly the response but it's useful when you want to close the current modal and open a new modal.

In the html in the same button, you can ask to close the current modal with data-dismiss and open a new modal directly with data-target:

<button class="btn btn-success" 
data-toggle="modal" 
data-target="#modalRegistration" 
data-dismiss="modal">Register</button>

Answer 2

I have exact same problem, and my solution is only if modal dialog have [role="dialog"] attribute :

/*
* Find and Close current "display:block" dialog,
* if another data-toggle=modal is clicked
*/
jQuery(document).on('click','[data-toggle*=modal]',function(){
  jQuery('[role*=dialog]').each(function(){
    switch(jQuery(this).css('display')){
      case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;}
    }
  });
});

Answer 3

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 4

$("#buttonid").click(function(){
    $('#modal_id_you_want_to_hid').modal('hide')
});

// same as above button id
$("#buttonid").click(function(){
$('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});

Answer 5

As mentioned above In the html in the same button, you can ask to close the current modal with data-dismiss and open a new modal directly with data-target:

<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>

But this will cause scroll-bar disappear and you will notice that if the second modal was longer that the first one

So the solution is to add the following style in the modal inline style :

Style = "overflow-y : scroll ; "

Answer 6

I use another way:

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