Create Nested Modals Bootstrap 5

By Posted on

When building modern UIs, modal dialogs are a powerful tool to guide users through settings, forms, confirmations, and more. But what happens when you need multiple modals that interact with each other? In this guide, you’ll learn how to build a nested modals Bootstrap 5, where one modal opens another, and the user must close the topmost modal before returning to the previous one.

Live Example

Nested Bootstrap Modal
  1. Click the “Setting” button above to open the main modal.
  2. Inside the Setting modal, you’ll see two buttons:
    • Account: opens the “Account” modal and disables the “Setting” modal.
    • Time: opens the “Time” modal and also hides the “Setting” modal.
  3. When either Account or Time is closed, the Setting modal reopens automatically.

HTML + JavaScript Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Nested Bootstrap Modal</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container py-5 text-center">
      <button
        class="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#settingModal"
      >
        Setting
      </button>
    </div>

    <!-- Modal 1: Setting -->
    <div class="modal fade" id="settingModal" tabindex="-1">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Setting</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body text-center">
            <button class="btn btn-outline-primary m-2" id="openAccountBtn">Account</button>
            <button class="btn btn-outline-secondary m-2" id="openTimeBtn">Time</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal 2: Account -->
    <div class="modal fade" id="accountModal" tabindex="-1" data-bs-backdrop="static">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header bg-primary text-white">
            <h5 class="modal-title">Account</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">This is the Account modal. It must be closed to return to Setting.</div>
        </div>
      </div>
    </div>

    <!-- Modal 3: Time -->
    <div class="modal fade" id="timeModal" tabindex="-1" data-bs-backdrop="static">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header bg-success text-white">
            <h5 class="modal-title">Time</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">This is the Time modal. It must be closed to return to Setting.</div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const settingModal = new bootstrap.Modal(document.getElementById("settingModal"));
        const accountModal = new bootstrap.Modal(document.getElementById("accountModal"));
        const timeModal = new bootstrap.Modal(document.getElementById("timeModal"));

        const openAccountBtn = document.getElementById("openAccountBtn");
        const openTimeBtn = document.getElementById("openTimeBtn");

        let showAccountModal = false;
        let showTimeModal = false;

        openAccountBtn.addEventListener("click", function () {
          showAccountModal = true;
          showTimeModal = false;
          settingModal.hide();
        });

        openTimeBtn.addEventListener("click", function () {
          showAccountModal = false;
          showTimeModal = true;
          settingModal.hide();
        });

        document.getElementById("settingModal").addEventListener("hidden.bs.modal", function () {
          if (showAccountModal) accountModal.show();
          else if (showTimeModal) timeModal.show();
        });

        document.getElementById("accountModal").addEventListener("hidden.bs.modal", function () {
          showAccountModal = false;
          settingModal.show();
        });

        document.getElementById("timeModal").addEventListener("hidden.bs.modal", function () {
          showTimeModal = false;
          settingModal.show();
        });
      });
    </script>
  </body>
</html>

Creating nested or stacked modals in Bootstrap requires careful handling of show/hide logic to ensure smooth transitions and avoid modal conflicts. Using JavaScript flags and event listeners, you can build an intuitive UI experience that feels seamless to users. Happy Coding…