Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Read the official Bootstrap Documentation for a full list of instructions and other options.


Basic Modal

Toggle a working modal demo by clicking the button below. It will slide up and fade in from the center of the page.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          </button>
      </div>
      <div class="modal-body">
        <p>Croissant jelly beans donut apple pie. Caramels bonbon lemon drops. Sesame snaps lemon drops lemon drops liquorice icing bonbon pastry pastry carrot cake. Dragée sweet sweet roll sugar plum.</p>
        <p>Jelly-o cookie jelly gummies pudding cheesecake lollipop macaroon. Sweet chocolate bar sweet roll carrot cake. Sweet roll sesame snaps fruitcake brownie bear claw toffee bonbon brownie.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Vertically Centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

<!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCenter">
    Launch modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="modalCenter" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalCenterTitle">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col mb-6 mt-2">
              <div class="form-floating form-floating-outline">
                <input type="text" id="nameWithTitle" class="form-control" placeholder="Enter Name">
                <label for="nameWithTitle">Name</label>
              </div>
            </div>
          </div>
          <div class="row g-4">
            <div class="col mb-2">
              <div class="form-floating form-floating-outline">
                <input type="email" id="emailWithTitle" class="form-control" placeholder="xxxx@xxx.xx">
                <label for="emailWithTitle">Email</label>
              </div>
            </div>
            <div class="col mb-2">
              <div class="form-floating form-floating-outline">
                <input type="date" id="dobWithTitle" class="form-control">
                <label for="dobWithTitle">DOB</label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
</div>

Modal with YouTube Video

Use data-theVideo data attribute with button to launch the video in modal.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#youTubeModal" data-theVideo="https://www.youtube.com/embed/EngW7tLk6R8">
  Launch modal
</button>

<!-- Modal -->
<div class="modal fade" id="youTubeModal" tabindex="-1" aria-labelledby="youTubeModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <iframe width="100%" height="350" src=""></iframe>
    </div>
  </div>
</div>
// Function to get and auto play youTube video
const autoPlayYouTubeModal = function() {
  const modalTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="modal"]'));
  modalTriggerList.map(function(modalTriggerEl) {
    modalTriggerEl.onclick = function() {
      const theModal = this.getAttribute('data-bs-target'),
        videoSRC = this.getAttribute('data-theVideo'),
        videoSRCauto = `${videoSRC}?autoplay=1`,
        modalVideo = document.querySelector(`${theModal} iframe`);
      if (modalVideo) {
        modalVideo.setAttribute('src', videoSRCauto);
      }
    };
  });
};

// Calling function on load
autoPlayYouTubeModal();

Scroll long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.

<!-- Modal with long content -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalLong">
  Option 1
</button>
<!-- Modal -->
<div class="modal fade" id="modalLong" tabindex="-1" aria-labelledby="modalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLongTitle">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal with scrollable content -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalScrollable">
  Option 2
</button>
<!-- Modal -->
<div class="modal fade" id="modalScrollable" tabindex="-1" aria-labelledby="modalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalScrollableTitle">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Backdrop

Add data-bs-backdrop="static" data attribute with .modal to remove modal backdrop. Alternatively, specify static for a backdrop which doesn't close the modal on outside click.

<!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#backDropModal">
    Launch modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="backDropModal" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
      <form class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="backDropModalTitle">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col mb-6 mt-2">
              <div class="form-floating form-floating-outline">
                <input type="text" id="nameBackdrop" class="form-control" placeholder="Enter Name">
                <label for="nameBackdrop">Name</label>
              </div>
            </div>
          </div>
          <div class="row g-4">
            <div class="col mb-2">
              <div class="form-floating form-floating-outline">
                <input type="email" id="emailBackdrop" class="form-control" placeholder="xxxx@xxx.xx">
                <label for="emailBackdrop">Email</label>
              </div>
            </div>
            <div class="col mb-2">
              <div class="form-floating form-floating-outline">
                <input type="date" id="dobBackdrop" class="form-control">
                <label for="dobBackdrop">DOB</label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
</div>

Toggle between modals

Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes. Please note multiple modals cannot be open at the same time—this method simply toggles between two separate modals.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalToggle">
  Launch modal
</button>

<!-- Modal 1-->
<div class="modal fade" id="modalToggle" aria-labelledby="modalToggleLabel" tabindex="-1" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#modalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2-->
<div class="modal fade" id="modalToggle2" aria-hidden="true" aria-labelledby="modalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-dismiss="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>

Fullscreen

Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog. Use .modal-fullscreen to always have modal with fullscreen and .modal-fullscreen-{sm|md|lg|xl|xxl}-down to have fullscreen modal for some screen sizes.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullscreenModal">
  Launch modal
</button>

<!-- Modal -->
<div class="modal fade" id="fullscreenModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalFullTitle">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. Sizing classes will be .modal-{sm|lg|xl} with .modal-dialog class.


Here we are providing few examples of animation, we are using animate.css to add different animation to modal. You can add different animation classes with .animate__animated class to modal.

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

In order to use extra animations on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header

<link rel="stylesheet" href="vendor/libs/animate-css/animate.css">

Slide from Top

To slide Modal from top use .modal-top class with .modal class.

<div class="modal modal-top fade" id="modalTop" tabindex="-1">
  <div class="modal-dialog">
    <form class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTopTitle">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col mb-6 mt-2">
            <div class="form-floating form-floating-outline">
              <input type="text" id="nameSlideTop" class="form-control" placeholder="Enter Name">
              <label for="nameSlideTop">Name</label>
            </div>
          </div>
        </div>
        <div class="row g-4">
          <div class="col mb-2">
            <div class="form-floating form-floating-outline">
              <input type="email" id="emailSlideTop" class="form-control" placeholder="xxxx@xxx.xx">
              <label for="emailSlideTop">Email</label>
            </div>
          </div>
          <div class="col mb-2">
            <div class="form-floating form-floating-outline">
              <input type="date" id="dobSlideTop" class="form-control">
              <label for="dobSlideTop">DOB</label>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </form>
  </div>
</div>

Transparent Modal

Use .modal-transparent class with .modal class for transparent modal.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modals-transparent">
  Transparent Modal
</button>

<!-- Modal -->
<div class="modal modal-transparent fade" id="modals-transparent" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <a href="javascript:void(0);" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></a>
        <p class="text-white text-large fw-light mb-4">Subscribe to get latest updates</p>
        <div class="input-group input-group-lg mb-4">
          <input type="text" class="form-control bg-white border-0" placeholder="Your email" aria-describedby="subscribe">
          <button class="btn btn-primary" type="button" id="subscribe">Subscribe</button>
        </div>
        <div class="text-start text-white">We won't share your email address</div>
      </div>
    </div>
  </div>
</div>

Onboarding Modal

These onboarding modals options are the perfect way to introduce your customers with your web application or you can also collect additional information from them. We have two layouts available: Vertical and Horizontal.

© 2017- Pixinvent, Hand-crafted & Made with ❤️