Modal windows can be used to show the user a message, or to showcase an image, anything that requires the rest of the screen to be of secondary importance to the content in the modal.

When a new modal window is called, it will check to see if the modal window is already set up and, if not, will add it to the page. All subsequent calls for a new modal will close the existing modal (if it is still open) and reuse the modal markup.

The modal window will be centred on the page, and constrained to be no more than 90% of the page height and width. Content will scroll vertically within the modal.


// Framed (text) modal
var m1 = new MODAL({
  content: '<p>Here is the modal text</p>',
  title: 'My modal window',
  frameless: false

// Framed (text) modal
var m2 = new MODAL({
  content: '<img src="media/pics/trees.jpg">',
  caption: 'This is a picture of some trees',
  frameless: true


  • content - a string of HTML which will be used to populate the modal window
  • title - the title text (optional, only in framed modals)
  • caption - the picture caption (optional, only in frameless modals)
  • frameless - Boolean, default false. Use true if you don't want the default frame styles on the modal window