...
...
...
...
...
...
...
...
...
...
Table of Contents |
---|
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:
Code Block | ||
---|---|---|
|
...
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 |
|
...
...
| ||||||
| String Body of the modal. Accepts HTML |
| ||||
| String Set the default bootstrap size of the modal. |
|
...
| ||||||
| 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 |
...
Page Tree
...
| Function | Example / Usage Details Using options.footerButtonsHtml
returnButton function
There are two functions calls made when the 'confirm' preset is being used confirm preset returnButton calls
Then the final footer is being built: confirm preset final footer
To customize the footer you will want to do the last code section expect for the |
Code sample
Options for a large default window
...
Code Block | ||
---|---|---|
| ||
CotApp.showModal({
originatingElement:$('#target_to_focus_when_modal_close'),
title: "This is the title",
body: "<p>Content goes here</p><p>Include <strong>HTML</strong> if you <em>want</em></p>",
modalSize: "modal-lg",
onShow:function(){
console.log('this event happens onShow');
},
onShown:function(){
console.log('this event happens onShown');
},
onHide:function(){
console.log('this event happens onHide');
},
onHidden:function(){
console.log('this event happens onHidden');
}
}) |
Options for an Alert window
...
Code Block | ||
---|---|---|
| ||
CotApp.showModal({
preset:'alert',
bootstrapType:'danger', // primary | success | info | danger | warning
originatingElement:$('#target_to_focus_when_modal_close'),
body: "<p>Warning ! This is an alert !</p>",
modalSize: "modal-md"
}) |
Options for a Confirm window
...
Code Block | ||
---|---|---|
| ||
CotApp.showModal({
preset:'confirm',
originatingElement:$('#target_to_focus_when_modal_close'),
title:'Answer the question',
body: "<p>Do you really really want it !</p>",
modalSize: "modal-md",
callback:function(){
alert('You confirmed !')
}
}) |
Options for a Confirm window with custom buttons
...
Code Block | ||
---|---|---|
| ||
CotApp.showModal({
preset:'confirm',
originatingElement:$('#target_to_focus_when_modal_close'),
title:'Answer the question',
body: "<p>Do you really really want it !</p>",
modalSize: "modal-md",
buttons: {
cancel: {
label: ' Custom cancel button',
bootstrapType: 'danger'
},
confirm: {
label: 'Custom Confirm !',
bootstrapType: 'success'
}
},
callback:function(){
alert('You confirmed !')
}
}) |