Bootstrap Modal

A modal is a dialog box which opens above the page. It is used for confirmations, forms and messages. The page behind it is darkened, and the user must close the modal before using the page again.

A basic modal

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Open the modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        The text of the modal goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

The preview is a small window, so the modal opens inside it. On a real page it covers the whole screen. Now we test it in real Chrome: open with the button, check, and close.

const modalEl = document.getElementById('exampleModal');
document.querySelector('[data-bs-toggle="modal"]').click();
await new Promise(r => setTimeout(r, 700));
console.log('after the click: modal has class show = ' + modalEl.classList.contains('show'));
console.log('body has class modal-open = ' + document.body.classList.contains('modal-open'));
console.log('title text: ' + modalEl.querySelector('.modal-title').textContent);

modalEl.querySelector('.btn-secondary').click();
await new Promise(r => setTimeout(r, 700));
console.log('after Close: modal has class show = ' + modalEl.classList.contains('show'));

Structure

• .modal is the full screen wrapper, and .fade gives the animation.
• .modal-dialog positions the box. .modal-content is the box itself.
• .modal-header, .modal-body and .modal-footer are the three parts.
• data-bs-toggle="modal" and data-bs-target="#id" on a button open the modal. data-bs-dismiss="modal" closes it.
• Always keep tabindex="-1" and the aria-labelledby for accessibility.

Sizes and options

Class on .modal-dialog	Effect
.modal-sm, .modal-lg, .modal-xl	Smaller or bigger box
.modal-dialog-centered	Vertically centered
.modal-dialog-scrollable	The body scrolls, and the header and the footer stay
.modal-fullscreen	Full screen (or .modal-fullscreen-md-down for small screens)

Open it with JavaScript

const myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
  backdrop: 'static',   // do not close when the user clicks outside
  keyboard: false       // do not close with the Escape key
});

myModal.show();
// later
myModal.hide();

Events

const el = document.getElementById('exampleModal');

el.addEventListener('shown.bs.modal', () => {
  console.log('The modal is open and the animation is finished');
});
el.addEventListener('hidden.bs.modal', () => {
  console.log('The modal is closed');
});

The events are show.bs.modal, shown.bs.modal, hide.bs.modal and hidden.bs.modal. The ones with “ed” at the end run after the animation.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.