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