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: 
For Bootstrap v4
----------------

You can toggle between modals by having putting `data-dismiss="modal"` and `data-toggle="modal"` in the same HTML element. You'd also need the `data-target` attribute set to the modal you'd like to open.

Here's an example:

```
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#Modal2" >
Open second modal
</button>

```

*Remember to set an id for each of the modals and have the data-target point to the one you'd like to open*

For bootstrap v5
----------------

Same as v4 just using the attributes `data-bs-toggle` `data-bs-dismiss` and `data-bs-target`

Like this:

```
<button class="btn btn-primary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#Modal2" >
Open second modal
</button>

```

They've included an example of this [in the v5 documentation](https://getbootstrap.com/docs/5.0/components/modal/#toggle-between-modals)

**NOTE:**

The two modals need to be independent of each other, not nested in one another, in order for this to work.
So if you're using an MVC framework, say for example ASP.NET MVC, and have the first modal as its own partial view, you can't have the second modal in that view. You'll need to put the second modal in the parent view.
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

```