## Material Bootstrap Modal

## Modal

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.

- Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the body so that modal content scrolls instead.
- Clicking on the modal “backdrop” will automatically close the modal.
- Material Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
- Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
- Once again, due to position: fixed, there are some caveats with using modals on mobile devices. See our browser support docs for details.
- Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Material Bootstrap modals. To achieve the same effect, use some custom JavaScript:

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 title

Modal body text goes here.

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

##### Modal title

×

Modal body text goes here.

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.

##### Modal title

×

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.

Launch demo modal

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

##### Modal title

×

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.

Launch demo modal

## Vertically centered

Add the centered property to vertically center the modal.

##### Modal title

×

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.

##### Modal title

×

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.

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.

##### New message

×
Recipient:
Message:
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

×

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.

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