...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Table of Contents |
---|
Include the library
In packageIn package.json, turn includeModal:'true'
...
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 | |
| 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 |
in your |
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 !') } }) |
...