Bootstrap - Modals

Modals in Bootstrap 5 are versatile, customizable, and easy-to-use components that overlay content on top of the main webpage. They’re perfect for displaying messages, forms, confirmation dialogs, and more, allowing users to focus on the task at hand without navigating away.

This guide covers:

Basic Modal Setup

Modal Customization and Options

Event Handling

Accessibility and Keyboard Interaction

Programmatic Control of Modals

Basic Modal Setup

To create a modal, start with a button that triggers the modal, and a modal structure that contains the modal’s content. Add the data-bs-toggle="modal" attribute to the trigger button and set data-bs-target to the ID of the modal.

Example HTML Structure

Here's the basic HTML structure for a Bootstrap modal:

<!DOCTYPE html>

<head>

<title>Bootstrap 5 Modal Example</title>

</head>

<body>

Open Modal

</button>

<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>

</div>

This is the content of the modal.

</div>

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</body>

</html>

In this structure:

The modal class on the <div> and the data-bs-toggle="modal" attribute on the button are required to enable modal functionality.

The .modal-dialog container controls the modal’s alignment and size.

.modal-content wraps the content inside the modal.

Modal Customization and Options

Bootstrap modals offer a range of options to customize their appearance and behavior.

Centering Modals Vertically

To center a modal vertically, add modal-dialog-centered to the modal’s dialog element:

</div>

Changing Modal Size

You can adjust the modal size by using these classes on .modal-dialog:

Small: modal-sm

Large: modal-lg

Extra Large: modal-xl

</div>

Event Handling

Bootstrap provides several JavaScript events for modals that allow you to hook custom behavior at key points.

show.bs.modal: Fired before the modal is shown.

shown.bs.modal: Fired after the modal has been displayed.

hide.bs.modal: Fired before the modal is hidden.

hidden.bs.modal: Fired after the modal is hidden.

Example: Logging When Modal is Opened

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

exampleModal.addEventListener('shown.bs.modal', () => {

console.log('Modal is fully shown');

});

Accessibility and Keyboard Interaction

Bootstrap modals come with built-in support for accessibility:

Keyboard Navigation: Pressing Esc closes the modal (if keyboard is set to true).

Focus Trap: Focus is automatically trapped within the modal, so users can only interact with elements inside it.

Disable the Esc key functionality with the keyboard option:

Open Modal (Esc Disabled)

</button>

Programmatic Control of Modals

You can control modals programmatically using Bootstrap’s JavaScript API.

Show, Hide, and Toggle Methods

// Select the modal

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

const modal = new bootstrap.Modal(modalElement);

// Show the modal

modal.show();

// Hide the modal

modal.hide();

// Toggle the modal (show if hidden, hide if shown)

modal.toggle();

Programmatically Set Options

Options such as backdrop and keyboard can be set programmatically:

const modalWithOptions = new bootstrap.Modal(modalElement, {

backdrop: 'static', // Prevents clicking outside to close

keyboard: false // Disables closing on Esc key

});

modalWithOptions.show();

Complete Example: Custom Modal with JavaScript Control

<!DOCTYPE html>

<head>

<title>Custom Bootstrap Modal</title>

</head>

<body>

Open Programmatic Modal

</button>

</div>

<h5 class="modal-title" id="customModalLabel">Programmatic Modal</h5>

</div>

This modal is controlled programmatically using JavaScript.

</div>

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

// Programmatic control of modal

const modalElement = document.getElementById('customModal');

const modal = new bootstrap.Modal(modalElement);

// Open modal on button click

document.getElementById('openModalBtn').addEventListener('click', () => {

modal.show();

});

// Optionally, you can control other events or options programmatically here

</script>

</body>

</html>