模态对话框 bootstrap-modal.js
调用方式
通过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…
- })