#### Components - Modal Dialogs

Statistics Invoices Schedule

##### Modal dialogs

Modal dialog is a small window that communicates information to the user and prompt them for a response. Dialog boxes are classified as `"modal"` or `"modeless"`, depending on whether or not they block interaction with the page that initiated the dialog. Table below contains basic modal dialog examples. Click `Launch` button to run modal examples.

Basic modals
Default modal dialog |  | Basic modal dialog with `header`, `body` and `footer` areas. Default examples displays: header - contains a title and a close button; footer - contains buttons and body contains static or dynamic content
Modal with icons |  | Modal with icons added to the specified elements: heading title, footer control buttons and text inside modal body
Modal with remote source | Launch | If a remote URL is provided, content will be loaded one time via jQuery's `load` method and injected into the `.modal-content` div
Disable backdrop |  | Disabled backdrop. Disable backdrop element using `data-backdrop="false"` or alternatively, specify `static` for a backdrop which doesn't close the modal on click
Disable keyboard interaction |  | Disabled keyboard interaction. If `keyboard` option is set to `true` (default), the modal can be closed when escape key is pressed
Disable animation |  | Disabled animation. For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup
Modal sizing
Mini size modal |  | Modal in mini size. Mini modal width is `300px`. To use, add `modal-xs` class to `.modal-dialog` container
Small size modal |  | Modal in small size. Small modal width is `400px`. To use, add `modal-sm` class to `.modal-dialog` container
Default size modal |  | Modal in default size. Default modal width is `600px`. Since this is a default size, modal markup doesn't require any additional sizing classes
Large size modal |  | Modal in large size. Large modal width is `900px`. To use, add `modal-lg` class to `.modal-dialog` container
Full size modal |  | Modal in full width size. This modal has `94%` width of the window. To use, add `modal-full` class to `.modal-dialog` container
Optional modal colors
Default modal theme |  | Default color theme. All areas of this modal dialog have `white` background color. Doesn't require any additional contextual classes
Primary modal header |  | Primary modal. To use, add `.modal-primary` class to the `.modal-header` container
Danger modal header |  | Danger modal. To use, add `.modal-danger` class to the `.modal-header` container
Success modal header |  | Success modal. To use, add `.modal-success` class to the `.modal-header` container
Warning modal header |  | Warning modal. To use, add `.modal-warning` class to the `.modal-header` container
Info modal header |  | Info modal. To use, add `.modal-info` class to the `.modal-header` container
Custom modal header color |  | Modal with `custom` color added to the modal header. To use, add any color class from the color system to the `.modal-header` container
Custom modal background color |  | Modal dialog with `solid` custom background color. To use, add any color class from the color system to the `.modal-content` container. Additionaly, you can also add a custom background color to the modal header
Form components
Vertical form |  | Modal with default vertical form layout and responsive grid. Forms must be placed outside of `.modal-body` container to prevent extra horizontal padding
Horizontal form |  | Modal with horizontal form layout. It does also support responsive grid, but in this case it will look best in wider modals
Inline form |  | Modal with with a simple `inline` form layout
Heading options
Modal with H1 heading |  | Modal title in `H1` size. In all heading sizes, vertical position of a `close` button will be automatically adjusted to the middle of the modal header
Modal with H2 heading |  | Modal title in `H2` size
Modal with H3 heading |  | Modal title in `H3` size
Modal with H4 heading |  | Modal title in `H4` size
Modal with H5 heading |  | Modal title in `H5` size
Modal with H6 heading |  | Modal title in `H6` size
Modal with basic title |  | Modal title could be either a standard heading or any other component, but make sure you have included `.modal-title` class to it
Modal with subtitle |  | Modal title `subtitle`. This can be either inline or block. To display a subtitle in one line with the title, remove `.display-block` class from it
Modal events
onShow event |  | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event
onShown event |  | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event
onHide event |  | This event is fired immediately when the `hide` instance method has been called
onHidden event |  | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete)
onLoaded event | Launch | This event is fired when the modal has loaded content using the `remote` option
Programmatic dialog boxes
Alert dialog |  | Example of an `alert` dialog replacement with default Bootstrap modals
Confirm dialog |  | Example of a `confirmation` dialog replacement with default Bootstrap modals including callback
Prompt dialog |  | Example of a `prompt` dialog replacement with default Bootstrap modals including callback
Sweet alerts
Basic alert |  | Basic sweet alert example with title only
Title with a text |  | Display additional text below the title
Auto closer |  | Close the alert after specified amount of time using `timer` option
Success message |  | Success alert using `type: success` option
Error message |  | Error alert using `type: error` option
Warning message |  | Warning alert using `type: warning` option
Info message |  | Info alert using `type: info` option
Combine messages |  | Message with a function attached to the "Confirm" and "Cancel" buttons

##### Basic modal

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

##### Modal with icons

Here we go! Example of an alert inside modal.

###### Sample heading with icon

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.

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.

##### Modal with remote source

##### Disable backdrop

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

##### Disable keyboard interaction

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

##### Disable animation

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

##### Mini modal

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

##### Small modal

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

##### Large modal

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

##### Full width modal

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

###### Primary header

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

###### Danger header

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

###### Success header

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

###### Warning header

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

###### Info header

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

###### Custom header color

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

##### Custom background color

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

##### Vertical form

First name
Last name
Address line 1
Address line 2
City
State/Province
ZIP code
Email name@domain.com
Phone # +99-99-9999-9999

##### Horizontal form

First name
Last name
Email
name@domain.com
Phone #
+99-99-9999-9999
Address line 1
City
State/Province
ZIP code

##### Inline form

Username:
Password:

# H1 heading title

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

## H2 heading title

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

### H3 heading title

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

#### H4 heading title

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

##### H5 heading title

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

###### H6 heading title

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

Basic heading title

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.

##### This is a modal title

And this is a subtitle

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

###### Another paragraph

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.