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

In first modal:

replace modal dismiss link in footer with close link below.

<div class="modal-footer">
      <a href="#"  data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a>
</div>

In second modal:

Then second modal replace top div with below div tag.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">

Answer 2

Try this

    $('#model1').modal('hide');
setTimeout(function(){
    $('#modal2').modal('show');
},400);

Answer 3

I had the same issue as @Gravity Grave whereby scrolling doesn't work if you use

data-toggle="modal" data-target="TARGET-2" 

in conjunction with

data-dismiss="modal"

The scroll doesn't work correctly and reverts to scrolling the page rather than the modal. This is due to data-dismiss removing the modal-open class from the tag.

My solution in the end was to set the html of the inner component on the modal and use css to fade the text in/out.

Answer 4

Problem with data-dismiss="modal" is it will shift your content to left

I am sharing what worked for me, problem statment was opening pop1 from pop2

JS CODE

var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
    if (showPopup2) {
        $('#popup2').modal('show');
        showPopup2 = false;
    }
});

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});

Answer 5

$("#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 6

Had the same issue, writing this here in case someone in the future stumbles upon this and has issues with multiple modals that have to have scrolling as well (I'm using Bootstrap 3.3.7)

What I did is have a button like this inside my first modal:

<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>

It will hide the first and then display the second, and in the second modal I would have a close button that would look like this:

<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>

So this will close the second modal and open up the first one and to make scrolling work I added to my .css file this line:

.modal {
overflow: auto !important;
}

PS: Just a side note, you have to have these modals separately, the minor modal can not be nested in the first one as you hide the first one

So here's the full example based on the bootstrap modal example:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Add lorem ipsum here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
          Open second modal
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"  data-toggle="modal" data-target="#exampleModal">Close</button>
      </div>
    </div>
  </div>
</div>