模态框对话
什么是模态框
简单来说，模态框就是在原有的界面上新增一个窗口，
以保证在不刷新网页的前提下和后台完成交互。
废话不多说，先来看效果图
如图，我们明显可以看到网页上面新增了一个窗口，这也就是常见的模态框样式
模态框结构
由上图看出，弹出的最上面一层和原本明显不在一层，模态框具体可分为三分：
1、文本层
文本层就是原本的页面，他存在于三层图层最下面的一层
不用操作样式
2、阴影层
阴影层就是看着灰蒙蒙的那一层，位于三层图层中间的一层
我们需要把阴影层进行定位(fixed)，让他盖在文本层之上
3、弹出框层
我们看到的和需要输入内容(完成信息的前后台交互)的一层就是弹出框层，
位于三层图层最上面一层，我们也需要把这一层进行定位(fixed)，使他位于阴影层之上显示
注：既然阴影层和弹出框层都需要定位(fixed),那么谁显示在上面就需要根据z-index来确定
简单模态框对话代码
1.先写html代码
2.再写css样式
3.利用jquery代码绑定点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易模态框</title> <style> /*我们先来把阴影层样式搞定,大小为全屏窗口,透明度调低一些,这样可以看到文本框的内容*/ .shadow{ width: 100vw; height: 100vh; background-color: black; opacity: 0.4; top: 0; left: 0; position: fixed; display: none; /*先让他不显示，然后我们点击按钮显示*/ z-index: 6; } /*弹出框层设置基本差不多，需要注意把z-index设的比阴影层高*/ .frame{ width: 300px; height: 300px; background-color: white; position: fixed; top: 200px; left: 400px; z-index: 66; display: none; /*先让他不显示，然后我们点击按钮显示*/ } </style> </head> <body> <!--这里我们就把body当成我们的文本层--> <h1>这是文本层</h1> <button type="button" class="show">点我弹出模态框</button> <!--再来创建阴影层--> <div class="shadow"></div> <!--创建弹出框层--> <div class="frame"> <span>这是弹出框层</span><br> <input type="text"> <input type="button" value="提交" class="submit"> <input type="button" value="取消" class="cancel"> </div> </body> <!--导入jquery--> <script src="http://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> <script> //第一步，我们需要监视文本层的按钮，一点击我们就把模态框显示出来 $('.show').click(function () { $('.shadow').show(); $('.frame').show(); }); //第二步，我们需要监视弹出框层的取消按钮，一点击就把模态框隐藏起来 $('.cancel').click(function () { $('.shadow').hide(); $('.frame').hide(); }); //到此位置，简易模态框就完成了 </script> </html>
