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.

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

Preview
HTML

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

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

Preview
HTML

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

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.

Preview
HTML

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.