Use Smart's Material Bootstrap JavaScript modal to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Before getting started with Smart.Core’s modal component, be sure to read the following as our menu options have recently changed.
Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
Modal body text goes here.
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Modal body text goes here.
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. By default all modals are with auto height.
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.
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.
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.
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.
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.
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.
You can also create a scrollable modal that allows scroll the modal body by setting the scrollable property:
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.
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.
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.
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.
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.
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.
Add the centered property to vertically center the modal.
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.
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.
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.
Have a bunch of buttons that all trigger the same modal with slightly different contents? Below is a live demo followed by example HTML and JavaScript. For more information, read the modal events docs for details on relatedTarget.
Have a bunch of buttons that all trigger the same modal with slightly different contents? Below is a live demo followed by example HTML and JavaScript. For more information, read the modal events docs for details on relatedTarget.
Changing the content of the input inside the modal is simple as that:
window.onload = function () {
document.addEventListener('click', function () {
const target = event.target,
isButton = event.target.closest('bootstrap-button');
if (isButton && isButton.getAttribute('data-toggle') === 'modal') {
const modal = document.querySelector(isButton.getAttribute('data-target')),
data = isButton.getAttribute('data-whatever');
if (data) {
const modalInput = modal.querySelector('.modal-body input');
if (modalInput) {
modalInput.value = data;
}
}
if (modal) {
modal.toggle();
}
}
});
Animation is purely made via CSS. The default animation depends on the CSS class fade. Removing that class will disable it.
<bootstrap-modal> Empty Modal with no Animation </bootstrap-modal>
Modals have three optional sizes, available via modifier classes to be placed on a Modal These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
Size | Class | Modal max-width |
---|---|---|
Small | .modal-sm |
300px |
Default | None | 500px |
Large | .modal-lg |
800px |
Extra large | .modal-xl |
1140px |
Modals have three optional sizes, available via modifier classes to be placed on a Modal These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
The modal plugin toggles your hidden content on demand. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
The following properties are available:
Name | Type | Default | Description |
---|---|---|---|
backdrop | string | true | Includes a modal-backdrop element. Alternatively, specify static for a
backdrop which doesn't close the modal on click or 'none' if you don't want to have a
.modal-backdrop element. |
focus | boolean | true | Puts the modal in focus if true. |
keyboard | boolean | true | Closes the modal when escape key is pressed |
opened | boolean | false | Shows the modal when initialized. |
centered | boolean | false | Determines if the Modal is center or not. |
scrollable | boolean | false | Determines if the Modal's body is scrollable or not. |
sizeMode | string | '' | Determines the size of the modal. Possible values are: 'xl', 'lg', 'sm', ''. Empty string is the default size ( medium ). |
Proeprties can be set as attributes on the Tag of the HTML element or during the window.onload stage via Javascript.
Manually toggles the modal. If the modal is opened this method will close it and vice versa.
document.querySelector('bootstra-modal').toggle()
Manually opens the modal.
document.querySelector('bootstra-modal').show()
Manually opens the modal.
document.querySelector('bootstra-modal').hide()
Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
document.querySelector('bootstra-modal').handleUpdate()
Removes the element from the DOM.
document.querySelector('bootstra-modal').dispose()
Smart's "bootstrap-modal" class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <bootstrap-modal>)
Event Type | Description |
---|---|
show | This event fires immediately when the show instance method is called. |
shown | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). |
hide | This event is fired immediately when the hide instance method has been
called. |
hidden | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |