跪求各位js高手，为什么点击放大浏览器窗口的时候，遮罩层出现白边？？
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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=utf-8" />
<title>遮罩层</title>
<style type="text/css">
*{
margin:0 auto;
}
#href {
width:100px;
height:1200px;
background:#9C0;
}
#D_none {
position:absolute;
left:0;
top:0;
display:none;
background:#000;
filter:alpha(opacity=30);
opacity:0.3;
}
</style>
</head>
<body>
<div id="href"><a class="D_none" href="#">遮罩层</a></div>
<div id="D_none"></div>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$(".D_none").click(function(){
$("#D_none").show();
lock();
})
})
function lock(){
$("#D_none").css({
width:$(window).width(),
height:$(document).height()
}).show();
}
</script>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>遮罩层</title>
<style type="text/css">
*{
margin:0 auto;
}
#href {
width:100px;
height:1200px;
background:#9C0;
}
#D_none {
position:absolute;
left:0;
top:0;
display:none;
background:#000;
filter:alpha(opacity=30);
opacity:0.3;
}
</style>
</head>
<body>
<div id="href"><a class="D_none" href="#">遮罩层</a></div>
<div id="D_none"></div>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$(".D_none").click(function(){
$("#D_none").show();
lock();
})
})
function lock(){
$("#D_none").css({
width:$(window).width(),
height:$(document).height()
}).show();
}
</script>
</body>
</html> 展开
2个回答
展开全部
你这个遮罩层的大小固定在了显示时浏览器窗口的大小了，改变窗口大小当然会出现问题
要监听window的resize事件，在这个事件里面获取window的长宽并改变遮罩大小
而且你还有个问题，如果页面有滚动条，你的遮罩会被滚动上去的...
解决方法是position:absolute;改为position:fixed;
要监听window的resize事件，在这个事件里面获取window的长宽并改变遮罩大小
而且你还有个问题，如果页面有滚动条，你的遮罩会被滚动上去的...
解决方法是position:absolute;改为position:fixed;
更多追问追答
追问
怎么解决？？？能写一下代码吗？
追答
$(window).resize(function(){
$("#D_none").css({
width:$(window).width(),
height:$(document).height()
});
});直接写的，没验证，不过应该没错...
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
什么白边，没有看到啊，截图看下
更多追问追答
追问
要先 缩小浏览器 在弹出遮罩层 然后再放大浏览器窗口，就看到了。
追答
那是因为你通过js写的弹出层是浏览器的宽高度，当你浏览器打开宽度不是全屏，那么它会默认你的宽高度就是当前的，所以缩放的时候就会有白色的背景了；
解决方法，直接给#D_none元素样式：宽高度=100%就行了，
主要代码这，内容太多发一部分；
<div id="D_none">
<div class="content"> 内容
<div class="abc">关闭</div>
</div>
</div>
#D_none { position:absolute; width:100%; height:100%; display:block; left:0; top:0; display:none; background:#000; filter:alpha(opacity=30); opacity:0.3;}
.abc{width:40px; height:40px; position:absolute;right:10px;top:10px; background:#f00}
.content{width:500px; height:300px; background:#fff; position:relative; top:50%; margin-top:-150px; left:50%; margin-left:-250px; color:#000; border-radius:10px; box-shadow:0 0 10px #00F}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
