How to use multiple modal in bootstrap?

Hi Friends 馃憢,

Welcome To aGuideHub! 鉂わ笍

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

Modal is basically a dialog box or popup window that is used to provide important information to the user or prompt user to take necessary actions before moving on. Modals are widely used to warn users for situations like session time out or to receive their final confirmation before going to perform any critical actions such as saving or deleting important data.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap libraries
  • Includes bootstrap libraries
  • Define its class name
  • Includes css in html page
  • Add JavaScript in <script> tag

This article will guide you to adding multiple modal in Bootstrap with example.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>

Step 2: Includes bootstrap libraries

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

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

Step 3: Includes bootstrap libraries

Now, load the Bootstrap JavaScript file before closing the body tag and done.

<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>

Step 4: Includes css in html page

<style>
  .modal:nth-of-type(even) {
    z-index: 1052 !important;
  }

  .modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
  }
</style>

Step 5: Define its class name

After that, create the multiple modal with a class name .modal.

<a data-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="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" id="myModal2" data-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="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. Lorem Ipsum ha sido el texto de relleno est谩ndar de
        las industrias desde el a帽o 1500, cuando un impresor (N. del T. persona
        que se dedica a la imprenta) desconocido us贸 una galer铆a de textos y los
        mezcl贸 de tal manera que logr贸 hacer un libro de textos especimen. No
        s贸lo sobrevivi贸 500 a帽os, sino que tambien ingres贸 como texto de relleno
        en documentos electr贸nicos
      </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>

Step 6: Add JavaScript in <script> tag

Add the following JavaScript in <script> tag after the <body> tag to specify 鈥楬H:mm:ss鈥 format to DateTimePicker.

    <script>
        $('#openBtn').click(function() {
            $('#myModal').modal({
                show: true
            });
        })
    </script>

Example.

Let鈥檚 look at the following example to understand how it basically works:

<!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>
    <style>
      .modal:nth-of-type(even) {
        z-index: 1052 !important;
      }

      .modal-backdrop.show:nth-of-type(even) {
        z-index: 1051 !important;
      }
    </style>
  </head>

  <body>
    <a data-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="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" id="myModal2" data-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="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. Lorem Ipsum ha sido el texto de relleno est谩ndar
            de las industrias desde el a帽o 1500, cuando un impresor (N. del T.
            persona que se dedica a la imprenta) desconocido us贸 una galer铆a de
            textos y los mezcl贸 de tal manera que logr贸 hacer un libro de textos
            especimen. No s贸lo sobrevivi贸 500 a帽os, sino que tambien ingres贸
            como texto de relleno en documentos electr贸nicos
          </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>

    <script>
      $("#openBtn").click(function () {
        $("#myModal").modal({
          show: true,
        });
      });
    </script>
  </body>
</html>

Check the output of the above code example.

Bootstrap, Modal, Button

Bootstrap, Modal, Title

Bootstrap, Multiple, Modal

All the best 馃憤

Follow me on Twitter