一、弹窗的运用
弹窗效果在网页和app中的运用还是比较常见的。每当在手机里下载一个app时，请求获取存储空间和地理位置时，绝大部分都是使用的弹窗。它不仅提醒作用强、节约页面空间，还比较美观。模态框（Modal）是覆盖在父窗体上的子窗体，目的是显示来自一个单独的内容，可以在不离开父窗体的情况下有一些互动（子窗体可提供信息、交互等）。使用模态窗口的时候，一般会用到某种触发器，常用的是按钮或链接。
二、模态框（Modal）简单介绍
模态框在bootstrap中是一个插件，所以也可以单独引用插件，但是这就需要引用modal.js。但是在本文中还是介绍用bootstrap的写法。模态框作为覆盖在父体窗口上的子窗口，它的窗口设置和常见方法如下图：
图2.1 窗口设置
图2.2 常见方法
三、制作步骤
如下3.1所示效果图，是一个较为完整的页面，这里只展示模态框的相关代码。
（1）制作触发器并设计样式。制作如下图3.1所示的模态框，用的是按钮触发器。这里的class="btn btn-primary"，btn它可以表示按钮的基类，btn-primary就是button所生的样式融合（还有input-primary和a-primary所生的样式），每种都有六种样式，分别是" btn-primary" 、"btn-warning"、 " btn-success" 、" btn-info"、 "btn-danger"、" btn-default"。代码如下：
| <button class="btn btn-primary" type="button">了解更多</button> |
|:----|
（2）设置模态框。class="modalfade"当模态框被切换时，它会引起内容淡入淡出。class="modal-body"，用于为模态窗口的主体设置样式。class="modal-footer"，用于为模态窗口的底部设置样式。class="modal-content"是用来设置模态框是显示还是隐藏。data-dismiss="modal"，用于关闭模态窗口。class="modal-dialog"是用来设置弹出框居中的。默认情况下弹出框的宽度比较小，不适合要求，bootstrap中提供了modal-dialog的三个选项，大、默认、小（modal-lg最大，默认中，modal-sm最小）。代码如下：
| <section style="position: relative;left: 530px;"><button class="btn btn-primary" type="button">了解更多</button><div class="modal fade" id="mymodal"> <div> <div> <div> <p> 旅游服务是指旅游业服务人员通过各种设施、设备、方法、手段、途径和“热情好客”的种种表现形式， </p> </div> <div> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div></div></section> |
|:----|
图3.1 效果图
（3）设置js。toggle指的是，点击的时候触发和当前模态窗口状态相反的操作。比如现在模态窗口是关闭的，那么点击按钮，就打开窗口。如果当前窗口是打开的，那么点击按钮就会关闭。此外，show，指的是点击的时候触发打开窗口。hide，指的是点击的时候触发关闭模态窗。当我们把“$("#mymodal").modal("toggle")”代码改成“$("#mymodal").modal("hide")”然后去点击按钮，会发现怎么点都打不开，这就是因为设定了点击触发关闭模态窗。
| $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); }); |
|:----|
END
