<!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>
