【原】前端|利用模态框（Modal）实现弹窗效果

一、弹窗的运用

弹窗效果在网页和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

编  辑   |   王楠岚

责  编   |   刘   连

 where2go 团队

---

微信号：算法与编程之美