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 |
|---|---|---|
preset | string Optional. Loads template. | Default is Possible values are |
title | String Title of the modal. Accepts HTML | title: <h2>This is my modal</h2>, |
body | String Body of the modal. Accepts HTML | zoom |
modalSize | String Set the default bootstrap size of the modal. | modalSize:'modal-lg' |
originatingElement | String An element (DOM or $-selected) to set focus to after the modal is closed, use for accessibility | originatingElement: $('#myButton')
|
className | String Optional, CSS class to put on the root div.modal element | className: 'myCustomClass |
bootstrapType | string Optional. When preset='alert', sets a bootstrap alert class to the modal. | Default is 'default'. Possible values are |
callback | Function Required if preset='confirm'. Callback function when user confirms the message | |
buttons | Object Optional. When preset='confirm' will change the buttons content and class | buttons: {
cancel: {
label: ' Cancel',
bootstrapType: 'default'
},
confirm: {
label: ' Confirm',
bootstrapType: 'primary'
}
}
|
onShow | Function Hook into boostrap modal events | |
onShown | Function Hook into boostrap modal events | |
onHide | Function Hook into boostrap modal events | |
onHidden | Function Hook into boostrap modal events |
Page Tree