View Source

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 false.

Possible values are 'confirm' or 'alert'

If no value is provided for the preset then default template is used which requires using the default implementation of footerButtonsHtml or writing a custom implementation for footerButtonsHtml

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.
Possible values : 'modal-sm', 'modal-lg'

modalSize:'modal-lg'

originatingElement

String Required

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 'primary' 'success''info' 'warning' 'danger'

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

footerButtonsHtml

Function
Let's the user define the footer for the modal

Example / Usage Details
If the value of footerButtonsHtml is defined
Here is where it falls in to the template of the Modal HTML:

'<div class="modal fade ' + options.className + '" id="' + id + '" tabindex="-1" role="dialog" aria-labelledby="' + id + '_title" aria-hidden="true" aria-modal="true">' + '    <div class="modal-dialog ' + options.modalSize + '">' + '      <div class="modal-content">' + '        <div class="modal-header">' + '          <button type="button" aria-label="Close" class="close" type="button" data-dismiss="modal">' + '            <span aria-hidden="true">×</span>' + '          </button>' + '          <div role="heading" aria-level="2" id="' + id + '_title" class="modal-title">' + options.title + '</div>' + '        </div>' + '        <div id="' + id + '_body" class="modal-body">' + options.body + '</div>' + '        <div class="modal-footer">' + options.footerButtonsHtml + '        </div>' + '      </div>' + '    </div>' + '  </div>';

Default behaviour for 'confirm' preset is to call the built in:
returnButton method

    var returnButton = function returnButton(bsType, opt) {
      if (opt && opt.hasOwnProperty('bootstrapType')) {
        var bsTypes = ['primary', 'success', 'info', 'warning', 'danger'];

        if (bsTypes.indexOf(opt.bootstrapType) == -1) {
          opt.bootstrapType = 'default';
        }
      }

There are two functions calls made when the 'confirm' preset is being used

returnButton('cancel', {
          bootstrapType: options.buttons.cancel.bootstrapType,
          label: options.buttons.cancel.label
        }) 
returnButton('confirm', {
          bootstrapType: options.buttons.confirm.bootstrapType,
          label: options.buttons.confirm.label
        });

Then the final footer is being built:

<div class="modal-footer">' + returnButton('cancel', {
          bootstrapType: options.buttons.cancel.bootstrapType,
          label: options.buttons.cancel.label
        }) + ' ' + returnButton('confirm', {
          bootstrapType: options.buttons.confirm.bootstrapType,
          label: options.buttons.confirm.label
        });
        '        </div>'

To customize the footer you will want to do the last code section expect for the <div class="modal-footer"> </div> in your
footerButtonsHtml
function

Code sample

Options for a large default window

DTS Knowledge Space > CoT Modal > localhost_9000_.png

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

DTS Knowledge Space > CoT Modal > localhost_9000_ (1).png

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

DTS Knowledge Space > CoT Modal > localhost_9000_ (2).png

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

DTS Knowledge Space > CoT Modal > localhost_9000_ (3).png

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 !')
  }
})

Page Tree