调用方式
通过data属性
无需编写JavaScript代码即可生成一个对话框。在一个主控元素,例如按钮,上设置data-toggle="modal"
,然后再设置data-target="#foo"
或href="#foo"
用以指向某个将要被启动的对话框。
- <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
通过JavaScript
仅用一行JavaScript代码即可启动id为myModal
的对话框:
- $('#myModal').modal(options)
选项
上面的选项都可以通过data属性或JavaScript代码传递给组件。对于data属性,将选项名称附着于data-
字符串之后,就像data-backdrop=""
一样。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
backdrop | boolean | true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
keyboard | boolean | true | Closes the modal when escape key is pressed |
show | boolean | true | Shows the modal when initialized. |
remote | path | false |
If a remote url is provided, content will be loaded via jQuery's
|
方法
.modal(options)
让你指定的内容变成一个模态对话框。接受一个可选的参数object
.
- $('#myModal').modal({
- keyboard: false
- })
.modal('toggle')
手动打开或隐藏一个模态对话框。
- $('#myModal').modal('toggle')
.modal('show')
手动打开一个模态对话框。
- $('#myModal').modal('show')
.modal('hide')
手动隐藏一个模态对话框。
- $('#myModal').modal('hide')
事件
Bootstrap中的模态对话框对外暴露了一些事件允许你监听。
事件 | 描述 |
---|---|
show | This event fires immediately when the show instance method is called. |
shown | This event is fired when the modal has been made visible to the user (will wait for css transitions to complete). |
hide | This event is fired immediately when the hide instance method has been called. |
hidden | This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete). |
- $('#myModal').on('hidden', function () {
- // do something…
- })