Versions Compared

Old Version 3

changes.mady.by.user baba baloul

Saved on

compared with

New Version 4

changes.mady.by.user baba baloul

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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
languagejs
themeEmacs
CotApp.showModal(options); //embedded apps
cot_app.showModal(options); //standalone apps

Options reference

PropertyDescriptionExample
preset

string Optional.

Loads template.

Default is false.

Possible values are 'confirm' or 'alert'






title

String 

Title of the modal. Accepts HTML

Code Block
languagejs
themeEmacs
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'

Code Block
languagejs
themeEmacs
modalSize:'modal-lg'
originatingElement

String  Required 

An element (DOM or $-selected) to set focus to after the modal is closed, use for accessibility

Code Block
languagejs
themeEmacs
originatingElement: $('#myButton')
className

String Optional,

CSS class to put on the root div.modal element

Code Block
languagejs
themeEmacs
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

Code Block
languagejs
themeEmacs
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



Code sample

Options for a large default window

Image Modified


Code Block
languagejs
themeEmacs
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

Image Added

Code Block
languagejs
themeEmacs
className: 'myCustomClassCotApp.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

Image Added

Code Block
languagejs
themeEmacs
className: 'myCustomClassCotApp.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

Image Added


Code Block
languagejs
themeEmacs
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

Page Tree
rootCoreJS CotJS Documentation