<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> | |
<title>弹出层</title> | |
<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> | |
</head> | |
<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> | |
<!-- | |
var w1=(".pop-home").width()/2 | |
var h1=(".pop-home").height()/2 | |
$(".phome").css({marginLeft:-w1,marginTop:-h1;}) | |
--> | |
</html> | |
弹出层
最新推荐文章于 2024-05-20 10:04:58 发布