網頁當中常見的效果，點擊按鈕，圖片等出現彈出層
<style>
.pop-body{display:none;background:#000;position:absolute;z-index:1000;top:0;left:0;opacity:0.5;}.pop-home{background:#6cf;position:fixed;top:50%;left:50%;margin-top:-150px;margin-left:-150px;width:300px;height:300px;display:none;z-index:1100;}
.pop-home span{font-size:30px;position:absolute;top:10px;right:10px;cursor:pointer;}
.on{border:1px solid #000;height:800px;}
</style>
<body>
<div class="fore1">點擊</div>
<div class="pop-body"></div>
<div class="pop-home">
<span>x</span>
</div>
<div class="on"></div>
<div class="on"></div>
<div class="on"></div>
<div class="on"></div>
<div class="on"></div>
<script src="jq源代碼/jquery-3.1.0.js" type="text/javascript"></script>
<script src="jq源代碼/jquery-3.1.0.1 .js" type="text/javascript"></script>
<script>
$('.fore1').click(function(){
var w=$(window).width()
var h=$(window).height()
$('.pop-body').show().css({width:w,height:h})
$('.pop-home').show()
$("body").css("overflow","hidden")
});
//點擊關閉
$('.pop-home span,.pop-body').click(function(){
$('.pop-body,.pop-home').hide()
$('body').css('overflow','auto')
});
</script>
</body>