模态窗口

这两天在项目开发中要用到模态窗口   具体的需求是根据用户选择的装置，在选择装置指标时动态关联到相应装置的装置指标

（ 装置、装置指标时一对多的关联关系）

 

具体效果如下

 

过程很简单，开发时听取了同事的建议

使用Bootstrap的模态对话框插件

这里附上url https://v2.bootcss.com/javascript.html#modals

 

以下是相应内容

模态对话框是一类简洁、灵活的的弹框，他们具有精简的功能和友好的默认行为。

静态案例

带有标题、正文、页脚按钮的对话框。

×

对话框标题

One fine body…

关闭 Save changes

1. <div class="modal hide fade">
2. <div class="modal-header">
3. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
4. <h3>对话框标题</h3>
5. </div>
6. <div class="modal-body">
7. <p>One fine body…</p>
8. </div>
9. <div class="modal-footer">
10. <a href="#" class="btn">关闭</a>
11. <a href="#" class="btn btn-primary">Save changes</a>
12. </div>
13. </div>

动态演示

点击下面的按钮会通过javascript触发一个模态对话框。对话框从页面顶端滑下的同时逐渐呈现。

查看演示案例

1. <!-- Button to trigger modal -->
2. <a href="#myModal" role="button" class="btn" data-toggle="modal">查看演示案例</a>
3.  
4. <!-- Modal -->
5. <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
6. <div class="modal-header">
7. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
8. <h3 id="myModalLabel">Modal header</h3>
9. </div>
10. <div class="modal-body">
11. <p>One fine body…</p>
12. </div>
13. <div class="modal-footer">
14. <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
15. <button class="btn btn-primary">Save changes</button>
16. </div>
17. </div>

---

调用方式

通过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	为模态对话框添加一个背景元素。另外，为背景指定static时，点击模态对话框的外部区域不会将其关闭。
keyboard	boolean	true	按下esc键时关闭模态对话框
show	boolean	true	初始化时即显示模态对话框
remote	path	false	如果提供了远程url地址，就会通过 jQuery的load方法加载内容并注入到.modal-body中。如果你使用的是data属性api，你还可以使用href标签指定远程数据源。案例如下：   <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	当show方法被调用时，此事件将被立即触发。
shown	当模态对话框呈现到用户面前时（会等待过渡效果执行结束）此事件被触发。
hide	当hide方法被调用时，此事件被立即触发。
hidden	当模态对话框被隐藏（而且过渡效果执行完毕）之后，此事件将被触发。

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