<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中弹出层</title>
</head>
<body>
<button class="Click">点击</button>
<style>
body{margin:0;padding:0;}
.popWrap{position:absolute;top:0;width:100%;height:100%;display:none;}//脱离文档流
.mask{position: absolute;top:0;width:100%;height:100%;background-color:gray;opacity:0.5;}
.popContent{position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-150px;width:400px;height:300px;background-color:white;}//fixed是关键
</style>
<div class="popWrap">
<div class="mask"></div>
<div class="popContent">
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
<script>
$(function(){
var Height = $(document).height();
$(".mask").css({"height":Height+"px"});//满屏遮罩
$(".Click").on("click",function(){
$(".popWrap").css({"display":"block"});
});
$(".mask").on("click",function(){
$(".popWrap").css({"display":"none"});
});
});
</script>
</body>
</html>
主要实现：满屏遮罩和弹出层随滚动条滚动而居中；
时间： 2024-11-03 03:36:41