<!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>
主要实现：满屏遮罩和弹出层随滚动条滚动而居中；