Backdrop

Use this template's JavaScript backdrop 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 Backdrop

Toggle a working backdrop 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 backdrop.

<!-- 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 mb-3">
            <div class="col 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>

Backdrop with Youtube Video

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

<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 backdrops 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 backdrop that allows scroll the backdrop body by adding .modal-dialog-scrollable to .modal-dialog.