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 Launchbutton to run modal examples.
| Basic modals | ||
|---|---|---|
| Default modal dialog |
Basic modal dialog with header, bodyand footerareas. 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 | |
| Disable backdrop |
Disabled backdrop. Disable backdrop element using data-backdrop="false"or alternatively, specify staticfor a backdrop which doesn't close the modal on click
|
|
| Disable keyboard interaction |
Disabled keyboard interaction. If keyboardoption 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 .fadeclass from your modal markup
|
|
| Remote source |
Default Bootstrap's remote source option replacement using jquery .load(). As suggested by Bootstrap dev team
|
|
| Modal sizing | ||
| Mini size modal |
Modal in mini size. Mini modal width is 300px. To use, add modal-xsclass to .modal-dialogcontainer
|
|
| Small size modal |
Modal in small size. Small modal width is 400px. To use, add modal-smclass to .modal-dialogcontainer
|
|
| 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-lgclass to .modal-dialogcontainer
|
|
| Full size modal |
Modal in full width size. This modal has 94%width of the window. To use, add modal-fullclass to .modal-dialogcontainer
|
|
| Optional modal colors | ||
| Default modal theme |
Default color theme. All areas of this modal dialog have whitebackground color. Doesn't require any additional contextual classes
|
|
| Primary modal header |
Primary modal. To use, add .bg-primaryclass to the .modal-headercontainer
|
|
| Danger modal header |
Danger modal. To use, add .bg-dangerclass to the .modal-headercontainer
|
|
| Success modal header |
Success modal. To use, add .bg-successclass to the .modal-headercontainer
|
|
| Warning modal header |
Warning modal. To use, add .bg-warningclass to the .modal-headercontainer
|
|
| Info modal header |
Info modal. To use, add .bg-infoclass to the .modal-headercontainer
|
|
| Custom modal header color |
Modal with customcolor added to the modal header. To use, add any color classfrom the color system to the .modal-headercontainer
|
|
| Custom modal background color |
Modal dialog with solidcustom background color. To use, add any color classfrom the color system to the .modal-contentcontainer. 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-bodycontainer 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 inlineform layout
|
|
| Heading options | ||
| Modal with H1 heading |
Modal title in H1size. In all heading sizes, vertical position of a closebutton will be automatically adjusted to the middle of the modal header
|
|
| Modal with H2 heading |
Modal title in H2size
|
|
| Modal with H3 heading |
Modal title in H3size
|
|
| Modal with H4 heading |
Modal title in H4size
|
|
| Modal with H5 heading |
Modal title in H5size
|
|
| Modal with H6 heading |
Modal title in H6size
|
|
| Modal with basic title |
Modal title could be either a standard heading or any other component, but make sure you have included .modal-titleclass 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 .d-blockclass from it
|
|
| Modal events | ||
| onShow event |
This event fires immediately when the showinstance method is called. If caused by a click, the clicked element is available as the relatedTargetproperty 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 relatedTargetproperty of the event
|
|
| onHide event |
This event is fired immediately when the hideinstance 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) | |
| Programmatic dialog boxes | ||
| Alert dialog |
Example of an alertdialog replacement with default Bootstrap modals
|
|
| Confirm dialog |
Example of a confirmationdialog replacement with default Bootstrap modals including callback
|
|
| Prompt dialog |
Example of a promptdialog replacement with default Bootstrap modals including callback
|
|
| Prompt with default value |
Example of a promptdialog replacement with default value
|
|
| Custom bootbox dialog | Example of a custom bootbox dialog with multiple buttons and callbacks | |
| Dialog with form | Example of a custom bootbox dialog with simple form and callbacks | |