How to open another modal in modal with Bootstrap?

Sometimes, we want to open another modal in modal with Bootstrap.

How to open another modal in modal with Bootstrap, we will look at in this article.

How to open another modal in modal with Bootstrap?

We can set the z-index, to open another modals in modal with bootstrap of the modals.
For instance, we can write

<a data-bs-toggle="modal" href="#myModal" class="btn btn-primary">
  Launch modal
</a>

<div class="modal" id="myModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-hidden="true"
        ></button>
      </div>
      <div class="container"></div>
      <div class="modal-body">
        Content for the dialog / modal goes here.
        <a data-bs-toggle="modal" href="#myModal2" class="btn btn-primary"
          >Launch modal</a
        >
      </div>
      <div class="modal-footer">
        <a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark"
          >Close</a
        >
      </div>
    </div>
  </div>
</div>

<div class="modal" id="myModal2" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">2nd Modal title</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-hidden="true"
        ></button>
      </div>
      <div class="container"></div>
      <div class="modal-body">
        Content for the dialog / modal goes here. Content for the dialog / modal
        goes here.
      </div>
      <div class="modal-footer">
        <a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark"
          >Close</a
        >
        <a href="#" class="btn btn-primary">Save changes</a>
      </div>
    </div>
  </div>
</div>

to add the modals.
Then we set the z-index of the modals by writing

.modal:nth-of-type(even) {
  z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
  z-index: 1061 !important;
}

so the 2nd modal will show on top of the first one.

Conclusion

We can set the z-index of the modals, to open an another modal in modal with Bootstrap.