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: 
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;
});

```
Hide modal dialog box.

**Method 1:** using Bootstrap.

```
$('.close').click(); 
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');

```

**Method 2:** using `stopPropagation()`.

```
$("a.close").on("click", function(e) {
  $("#modal").modal("hide");
  e.stopPropagation();
});

```

**Method 3:** after shown method invoke.

```
$('#myModal').on('shown', function () {
  $('#myModal').modal('hide');
})

```

**Method 4:** Using CSS.

```
this.display='block'; //set block CSS
this.display='none'; //set none CSS after close dialog

```