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
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 .bg-primary class to the .modal-header container
Danger modal header Danger modal. To use, add .bg-danger class to the .modal-header container
Success modal header Success modal. To use, add .bg-success class to the .modal-header container
Warning modal header Warning modal. To use, add .bg-warning class to the .modal-header container
Info modal header Info modal. To use, add .bg-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)
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
Prompt dialog A replacement for the prompt function
With a loader Display a loading icon while working on request
With HTML message Add support of HTML in alert message
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
© 2015. Limitless Web App Kit by Eugene Kopyov siddim.com