模态对话框 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=""一样。

名称 类型 默认值 描述
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 load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

方法

.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中的模态对话框对外暴露了一些事件允许你监听。

事件 描述
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).
  1. $('#myModal').on('hidden', function () {
  2. // do something…
  3. })
上一篇:Ubuntu apt-get卸载小记


下一篇:网站配色、网站模板网址 UE样式 metro报表