这两天在项目开发中要用到模态窗口 具体的需求是根据用户选择的装置,在选择装置指标时动态关联到相应装置的装置指标
( 装置、装置指标时一对多的关联关系)
具体效果如下
过程很简单,开发时听取了同事的建议
使用Bootstrap的模态对话框插件
这里附上url https://v2.bootcss.com/javascript.html#modals
以下是相应内容
模态对话框是一类简洁、灵活的的弹框,他们具有精简的功能和友好的默认行为。
静态案例
带有标题、正文、页脚按钮的对话框。
×
对话框标题
One fine body…
- <div class="modal hide fade">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3>对话框标题</h3>
- </div>
- <div class="modal-body">
- <p>One fine body…</p>
- </div>
- <div class="modal-footer">
- <a href="#" class="btn">关闭</a>
- <a href="#" class="btn btn-primary">Save changes</a>
- </div>
- </div>
动态演示
点击下面的按钮会通过javascript触发一个模态对话框。对话框从页面顶端滑下的同时逐渐呈现。
- <!-- Button to trigger modal -->
- <a href="#myModal" role="button" class="btn" data-toggle="modal">查看演示案例</a>
- <!-- Modal -->
- <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3 id="myModalLabel">Modal header</h3>
- </div>
- <div class="modal-body">
- <p>One fine body…</p>
- </div>
- <div class="modal-footer">
- <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
- <button class="btn btn-primary">Save changes</button>
- </div>
- </div>
调用方式
通过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 | 为模态对话框添加一个背景元素。另外,为背景指定static 时,点击模态对话框的外部区域不会将其关闭。 |
keyboard | boolean | true | 按下esc键时关闭模态对话框 |
show | boolean | true | 初始化时即显示模态对话框 |
remote | path | false | 如果提供了远程url地址,就会通过 jQuery的
|
方法
.modal(options)
让你指定的内容变成一个模态对话框。接受一个可选的参数object
.
- $('#myModal').modal({
- keyboard: false
- })
.modal('toggle')
手动打开或隐藏一个模态对话框。
- $('#myModal').modal('toggle')
.modal('show')
手动打开一个模态对话框。
- $('#myModal').modal('show')
.modal('hide')
手动隐藏一个模态对话框。
- $('#myModal').modal('hide')
事件
Bootstrap中的模态对话框对外暴露了一些事件允许你监听。
事件 | 描述 |
---|---|
show | 当show 方法被调用时,此事件将被立即触发。 |
shown | 当模态对话框呈现到用户面前时(会等待过渡效果执行结束)此事件被触发。 |
hide | 当hide 方法被调用时,此事件被立即触发。 |
hidden | 当模态对话框被隐藏(而且过渡效果执行完毕)之后,此事件将被触发。 |
- $('#myModal').on('hidden', function () {
- // do something…
- })