<!DOCTYPE html>
<html>
<head>
</head>
<body id="body">
<!--
/*弹出遮罩层*/
第一步：初始化遮罩层的基本属性，将其相对于浏览器窗口定位，将其尺寸缩放为0
第二步：设置遮罩层的高度，以便弹出式覆盖整个浏览器窗口
第三步：通过点击事件给遮罩层添加弹出动画类
/*固定宽高盒子上下左右居于不定宽高容器正中*/
第一步：设置待定位盒子和宽高值
第二步：将待定位盒子position属性设为absolute使其相对于父元素绝对定位（相对于static定位以外的第一个父元素进行定位，这里是父元素div1）,
使其顶部和左侧定位距离设为父元素高和宽的50%（即：先将盒子定位到“父元素4分之1区域的右下部”）
第三步：把待定位盒子的margin-top值和margin-left值设为其高度和宽度一半的负值（即：把盒子从右下区域拉回正中间）
-->
<div id="div1">
<div id="div2">
<div>
content content content content content content content content
</div>
<div id="close">关闭遮罩弹出层</div>
</div>
</div>
<div id="show">点击弹出遮罩层</div>
<style>
* {
margin:0;
padding:0;
}
#body {
background-color:green;
}
#show, #close {
cursor:pointer;
}
#div1 {
width:100%;
background: rgba(47, 63, 89, 0.8);
position:fixed; /*使遮罩层相对于浏览器窗口进行绝对定位*/
top:0;
left:0;
transform:scale(0,0);
}
#div2 {
width:300px;
height:200px;
background-color:red;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}
/*Css动画类*/
.coverAniamtion {
animation: name 2s both;
}
@keyframes name {
from {
transform:scale(0,0);
}
to {
transform:scale(1,1);
}
}
</style>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(function () {
var height = $(window).height();
$("#div1").css("height", height);
$("#show").click(function () {
$("#div1").show();
$("#div1").addClass("coverAniamtion");
});
$("#close").click(function () {
$("#div1").hide();
});
});
</script>
</body>
</html>
