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.
Below is a static modal example (meaning its
display have been overridden).
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Scrolling long content
When modals become too long for the user’s viewport or device, they scroll independent of the page itself.
You can also create a scrollable modal that allows scroll the modal body by adding
.modal-dialog to vertically center the modal.
Varying modal content
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use
event.relatedTarget and HTML
data-bs-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.
Modals have three optional sizes. Add
.modal-dialog for additional sizes.