twitter-bootstrap Modal Dialogs Basic Javascript usage and initialization


Example

Modal dialog components can be instantiated via jQuery with the function $('#myModal').modal(options), where $('#myModal') is a top-level reference to the specific modal dialog and options is a Javascript object specifying the modal dialog's default attributes.

The options object allows for multiple properties to be defined which will affect how the modal dialog behaves. These properties are defined as such:

  • The backdrop property allows a user to define whether or not they want a grey background overlay to appear behind the modal dialog. Both boolean values and the string "static" are recognized. If "static" is specified, the modal dialog will not be closed when a user clicks on the background overlay.
  • The keyboard property allows a user to define whether or not they want the modal dialog to be closed when the escape key is pressed on the keyboard.
  • The show property allows a user to define whether or not they want the modal dialog to appear when the modal is initialized.

Here is an example of the basic Javascript usage:

$('#carModal').modal({ backdrop: false, keyboard: true, show: false });

As with other Bootstrap components, the modal's options can also be specified in HTML via data attributes.