模态对话框 bootstrap-modal.js
2014-07-14 15:25
375 查看
调用方式
通过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 staticfor 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 loadmethod and injected into the .modal-body. If you're using the data api, you may alternatively use the hreftag to specify the remote source. An example of this is shown below: <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a> |
方法
.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 showinstance 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 hideinstance 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). |
// do something…
})
相关文章推荐
- Bootstrap 学习之js插件(模态框(Modal)插件)
- js控制Bootstrap 模态框(Modal)插件
- Bootstrap的js插件之模态框(modal)
- [js学习笔记]bootstrap中模态对话框水平垂直居中
- IE8-11,bootstrap-modal.js,模态框,缓存问题
- JQuery或者Js函数显示Bootstrap模态框(modal)
- Bootstrap插件(一)——模态框(modal.js)
- bootstrap添加多个模态对话框支持
- 【JS--DOM】--模态对话框-ShowModalDialog函数
- JS 模态对话框和非模态对话框
- Bootstrap(v3.2.0)模态框(modal)垂直居中
- JS对话框 JS模态对话框 showModalDialog用法详解
- JS对话框 JS模态对话框 showModalDialog用法详解
- 一个 JS 写的 Table 自增/减行例子,和一个模态对话框传值例子的源代码
- bootstrap模态框(modal)使用remote方法加载数据,只能加载一次的解决办法
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法
- JS对话框 JS模态对话框 showModalDialog用法详解
- bootstrap使用modal动态对话框时,按回车键无法确认,反而取消对话框
- JS 模态对话框和非模态对话框操作技巧汇总