Modals
Modals are handy JavaScript component for displaying messages to the user
while hiding the rest of the page. Modals are highly customizable from both a CSS and
JavaScript perspective.
Example
To display a modal, call the Modals module with your options via the
module loader.
Options
Modals can also be used to confirm a user action via callbacks. Below is an example of a notification with all options. Please see the table for full details details.
| Option key | Value | Behavior |
|---|---|---|
| type | stringprimary|info|success|warning|danger |
Contextualizes card styling. |
| header | stringprimary|info|success|warning|danger |
Contextualizes card header styling. |
| icon | string |
Icon suffix text for displaying an icon. |
| title | string |
Text to be displayed inside the title. |
| message | string |
Text to be displayed inside the title. |
| extras | string |
Any extra HTML in string format to insert into the modal below the opening text. |
| closeAnywhere | boolean |
Can the user click anywhere outside the modal to close it. |
| closeText | string |
Text to be displayed in cancel button. |
| closeClass | string |
Classname to be applied to cancel button. |
| confirmText | string |
Text to be displayed in confirm button. |
| confirmClass | string |
Classname to be applied to confirm button. |
| onBuilt | function |
Javascript function to be called when the modal element is built, but not yet inserted into the DOM. this is the modal element. |
| onBuiltArgs | array |
Array of arguments to be passed to the onBuilt callback. |
| onRender | function |
JavaScript function to be called when the modal element is built and inserted into the DOM. this is the modal element. |
| onRenderArgs | array |
Array of arguments to be passed to the onRender callback. |
| onClose | function |
JavaScript function to be called when the modal is being closed. this is the modal element. |
| onCloseArgs | array |
Array of arguments to be passed to the onClose callback. |
| validateConfirm | function |
JavaScript function to be called when the confirm button is clicked. Return a boolean to close or keep the modal. This can be useful for validating forms inside more complex modals. |