模态对话框
什么是模态框
简单来说，模态框就是在原有的界面上新增一个窗口，
以保证在不刷新网页的前提下和后台完成交互。
废话不多说，先来看效果图
如图，我们明显可以看到网页上面新增了一个窗口，这也就是常见的模态框样式
模态框结构
由上图看出，弹出的最上面一层和原本明显不在一层，模态框具体可分为三分：
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>
