How to use multiple modal in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To create multiple modals in bootstrap, you have to handle multiple modal ids and trigger those id different buttons or events that’s how you can handle two or more modals in Bootstrap.

Today, I am going to show you. How to use multiple modals in bootstrap with code example.

Here, we will see an example of

  1. Bootstrap Nested Modal Example ( modal on modal or double modal )
  2. Bootstrap one after one Modal Example ( Close first modal before open another modal )

Let’s start today’s article bootstrap multiple modals

Bootstrap Nested Modal Example ( modal on modal or double modal ).

In this example, I have created the first modal and which you can open from the page and the second modal which you can open from the first modal.

So this is a basic example of Modal inside modal or modal over modal.

Here, In modal two I used some custom CSS to handle the backdrop issue in multiple modals.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
      crossorigin="anonymous"
    />
    <title>Bootstrap</title>
  </head>

  <body>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      "
    >
      <a data-toggle="modal" href="#myModal" class="btn btn-primary"
        >Launch modal</a
      >
    </div>

    <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="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              ×
            </button>
          </div>
          <div class="container"></div>
          <div class="modal-body">
            Content for the dialog / modal goes here.
            <a data-toggle="modal" href="#myModal2" class="btn btn-primary"
              >Launch modal</a
            >
          </div>
          <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
          </div>
        </div>
      </div>
    </div>
    <div class="modal modal-md" id="myModal2" style="background: rgba(0, 0, 0, 0.5);
    z-index: 1072 !important; padding: 100px">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">2nd Modal title</h4>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              ×
            </button>
          </div>
          <div class="container"></div>
          <div class="modal-body">
            Lorem Ipsum es simplemente el texto de relleno de las imprentas y
            archivos de texto.
          </div>
          <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Check the output of the above code example of bootstrap two modals on the same page. here I also solved the bootstrap multiple modals modal-backdrop issue.

Bootstrap, Multiple, Modal

Here, we are provided code codesandbox links for the above program for making bootstrap multiple modals on one page or nested modal example. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

Bootstrap one after one Modal Example

This way is the safest way to handle multiple modals on a single page.

Here, I opened the first modal when someone clicks on the page button and someone opens the second modal then before opening the second modal I am closing the first one using data-dismiss="modal".

So here, you don’t need any custom CSS for handling backdrop issues.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
      crossorigin="anonymous"
    />
    <title>Bootstrap</title>
  </head>

  <body>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      "
    >
      <a data-toggle="modal" href="#myModal" class="btn btn-primary"
        >Launch modal</a
      >
    </div>

    <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="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              ×
            </button>
          </div>
          <div class="container"></div>
          <div class="modal-body">
            Content for the dialog / modal goes here.
            <a data-dismiss="modal" data-toggle="modal" href="#myModal2" class="btn btn-primary"
              >Launch modal</a
            >
          </div>
          <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
          </div>
        </div>
      </div>
    </div>
    <div class="modal modal-md" id="myModal2">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">2nd Modal title</h4>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              ×
            </button>
          </div>
          <div class="container"></div>
          <div class="modal-body">
            Lorem Ipsum es simplemente el texto de relleno de las imprentas y
            archivos de texto.
          </div>
          <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Check the output of the above code example of bootstrap two modals on the same page shown one by one.

Bootstrap, Multiple, Modal

Here, we are provided code codesandbox links for the above program to make bootstrap multiple modals on one page or nested modal example. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

Happy Coding,

I hope the above example with help you to do your task.

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts