模态对话框 bootstrap-modal.js

调用方式

通过data属性

无需编写JavaScript代码即可生成一个对话框。在一个主控元素，例如按钮，上设置data-toggle="modal"，然后再设置data-target="#foo" 或href="#foo"用以指向某个将要被启动的对话框。

1. <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通过JavaScript

仅用一行JavaScript代码即可启动id为myModal的对话框：

1. $('#myModal').modal(options)

选项

上面的选项都可以通过data属性或JavaScript代码传递给组件。对于data属性，将选项名称附着于data-字符串之后，就像data-backdrop=""一样。

方法

.modal(options)

让你指定的内容变成一个模态对话框。接受一个可选的参数object.

1. $('#myModal').modal({
2. keyboard: false
3. })

.modal('toggle')

手动打开或隐藏一个模态对话框。

1. $('#myModal').modal('toggle')

.modal('show')

手动打开一个模态对话框。

1. $('#myModal').modal('show')

.modal('hide')

手动隐藏一个模态对话框。

1. $('#myModal').modal('hide')

事件

Bootstrap中的模态对话框对外暴露了一些事件允许你监听。

1. $('#myModal').on('hidden', function () {
2. // do something…
3. })

下载说明