Use Smart's Material Bootstrap JavaScript modal to add dialogs to your site for lightboxes, user notifications, or completely custom content.

How it works

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.

Live demo

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

Launch demo modal

Scrolling long content

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.

Launch demo modal

You can also create a scrollable modal that allows scroll the modal body by setting the scrollable property:

Launch demo modal

Vertically centered

Add the centered property to vertically center the modal.

Vertically centered modal Vertically centered scrollable modal

Varying modal content

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.

Open modal for @mdo Open modal for @fat Open modal for @getbootstrap

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();
            }
        }
 });

Change Animation

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>
					

Optional Sizes

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
Extra large modal Large modal Small modal

Usage

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.

Properties

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.

Methods

toggle

Manually toggles the modal. If the modal is opened this method will close it and vice versa.

document.querySelector('bootstra-modal').toggle()

show

Manually opens the modal.

document.querySelector('bootstra-modal').show()

hide

Manually opens the modal.

document.querySelector('bootstra-modal').hide()

handleUpdate

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()

dispose

Removes the element from the DOM.

document.querySelector('bootstra-modal').dispose()

Events

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).