modal

A modal window for the browser.

Modal

A modal window for the browser.

This module provides generic modal dialog functionality for blocking the UI and obtaining user input.

You need to 'require' this module in a commonJS style environment, and you need to be able to require the things with the .jade extension. I use browserify to do this.

modal([options])[.on('event')]
  • title (string)
  • content (jQuery DOM element / raw string)
  • buttons (array)
    • text (string) the button text
    • event (string) the event name to fire when the button is clicked
    • className (string) the className to apply to the button
    • iconClassName (string) adds an i element before button text with the given class(es)
    • keyCodes ([numbers]) the keycodes of shortcuts keys for the button
  • clickOutsideToClose (boolean) whether a click event outside of the modal should close it
  • clickOutsideEvent (string) the name of the event to be triggered on clicks outside of the modal
  • className (string) optional class to apply to the modal element

Events will be fired on the modal according to which button is clicked. Defaults are confirm/cancel, but these can be overriden in your options.

modal(
  { title: 'Delete object'
  , content: 'Are you sure you want to delete this object?'
  , buttons:
    [ { text: 'Don’t delete', event: 'cancel', keyCodes: [ 27 ] }
    , { text: 'Delete', event: 'confirm', className: 'button-danger', iconClassName: 'icon-delete' }
    ]
  })
  .on('confirm', deleteItem)