CoT Modal
Include the library
In package.json, turn includeModal:'true'
Launch the modal
Using modal dialogs is a common design pattern with core apps. This helper does most of the work for you, including AODA compliance.
The method below is a static method of the cot_app (if your app is standalone) or CotApp (if your app is embedded) class.
Use it like this:
CotApp.showModal(options); //embedded apps
cot_app.showModal(options); //standalone apps
Options reference
Property | Description | Example |
---|---|---|
| string Optional. Loads template. | Default is Possible values are
|
| String Title of the modal. Accepts HTML | title: <h2>This is my modal</h2>, |
| String Body of the modal. Accepts HTML |
|
| String Set the default bootstrap size of the modal. | modalSize:'modal-lg' |
| String Required An element (DOM or $-selected) to set focus to after the modal is closed, use for accessibility | |
| String Optional, CSS class to put on the root div.modal element | |
| string Optional. When preset='alert', sets a bootstrap alert class to the modal. | Default is 'default'. Possible values are |
| Function Required if preset='confirm'. Callback function when user confirms the message | |
| Object Optional. When preset='confirm' will change the buttons content and class | |
| Function Hook into boostrap modal events | |
| Function Hook into boostrap modal events | |
| Function Hook into boostrap modal events | |
| Function Hook into boostrap modal events | |
| Function | Example / Usage Details Using options.footerButtonsHtml
returnButton functionThere are two functions calls made when the 'confirm' preset is being used confirm preset returnButton callsThen the final footer is being built: confirm preset final footerTo customize the footer you will want to do the last code section expect for the |