码迷,mamicode.com
首页 > Web开发 > 详细

模态对话框 bootstrap-modal.js

时间:2014-07-14 17:46:09      阅读:363      评论:0      收藏:0      [点我收藏+]

标签:des   style   java   os   width   for   

 

 

 

 

调用方式

通过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. })

模态对话框 bootstrap-modal.js,布布扣,bubuko.com

模态对话框 bootstrap-modal.js

标签:des   style   java   os   width   for   

原文地址:http://www.cnblogs.com/xuxiaoshuan/p/3842779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!