JS弹出层，完美中的缺限，求解决办法~~

其实看起来没什么问题，认真测试有两个问题，和一个技术实现
1，先把浏览器缩小→再点击弹出层→再浏览器再大化问题就出来了，右边没有屏掉
2，先把浏览器最大化→再点击弹出层→再将浏览器缩小问题又出来了，出显了左右的滚动条，本应该不出显滚动条的
还想实现：弹出层后无论滚动条怎么拖都固定在浏览器正中间
<!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>
</head>
<body>
<script>
function A(){
var w = document.createElement("div");
w.setAttribute("id","mybody")
with(w.style){
position = 'absolute';
zIndex = '10000';
width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
height =Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
position="absolute";
left = '0';
top = '0';
background = '#000000';
filter = 'Alpha(opacity=70)';
opacity = '0.7';
}
document.body.appendChild(w);
//**********************************************//
var ig=document.createElement("div");
ig.setAttribute("id","mypic")
ig.innerHTML='<img src="http://www.hao123.com/images/guangg/youa.gif" onclick="C()"/>';
document.getElementById("mybody").appendChild(ig);
with(ig.style){
position = 'absolute';
zIndex = '10001';
left = '50%';
top = '50%';
marginLeft = - ig.offsetWidth / 2 + 'px';
marginTop = - ig.offsetHeight / 2 + 'px';
}
document.body.appendChild(ig);
}
function C(){
document.body.removeChild(mybody);
document.body.removeChild(mypic);
}
</script>
<a href="#" onclick="A()">点击这里弹出层</a>
 ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
</head>
<body>
<script>
function A(){
 var w = document.createElement("div");
 w.setAttribute("id","mybody")
 with(w.style){
 position = 'absolute';
 zIndex = '10000';
 width = "100%";
 height = "100%";

 position="absolute";
 left = '0';
 top = '0';
 background = '#000000';
 filter = 'Alpha(opacity=70)';
 opacity = '0.7';
 }
 document.body.appendChild(w);
 //**********************************************//
 var ig=document.createElement("div");
 ig.setAttribute("id","mypic")
 ig.innerHTML='<img src="http://www.hao123.com/images/guangg/youa.gif" onclick="C()"/>';
 document.getElementById("mybody").appendChild(ig);
 with(ig.style){
 position = 'absolute';
 zIndex = '10001';
 left = '50%';
 top = '50%';
 marginLeft = - ig.offsetWidth / 2 + 'px';
 marginTop = - ig.offsetHeight / 2 + 'px';
 }
document.getElementsByTagName('html')[0].style.overflow="hidden";
 document.body.appendChild(ig);
}
function C(){
document.getElementsByTagName('html')[0].style.overflow="auto";
 document.body.removeChild(mybody);
 document.body.removeChild(mypic);
}
</script>
<a href="#" onclick="A()">点击这里弹出层</a>
 ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff
</body>
</html>
<body onresize="javascript:d.setCss();">var diaog = function() {
 this.w = null;
 this.ig = null;
 }
 diaog.prototype.create = function() {
 this.w = document.createElement('div');
 document.body.appendChild(this.w);
 this.ig = document.createElement('div');
 document.body.appendChild(this.ig);
 }
 diaog.prototype.setCss = function() {
 this.w.setAttribute("id", "mybody")
 with (this.w.style) {
 position = 'absolute';
 zIndex = '10000';
 width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";//重新获值
 height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";//重新获值
 position = "absolute";
 left = '0';
 top = '0';
 background = '#000000';
 filter = 'Alpha(opacity=70)';
 opacity = '0.7';
 }
 alert(Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px")
 this.ig.setAttribute("id", "mypic")
 this.ig.innerHTML = '<img src="http://www.hao123.com/images/guangg/youa.gif" onclick="C()"/>';
 with (this.ig.style) {
 position = 'absolute';
 zIndex = '10001';
 left = '50%';
 top = '50%';
 marginLeft = -this.ig.offsetWidth / 2 + 'px';
 marginTop = -this.ig.offsetHeight / 2 + 'px';
 }
 }
 var d;
 window.onload = function() {
 d = new diaog();
 d.create();
 d.setCss();
 }
 function C() {
 document.body.removeChild(mybody);
 document.body.removeChild(mypic);
 }
这个只解决了问题1，还有问题2：浏览器缩小就出现右左的滚动条，按照内容的宽度不应该出现滚动条的。这个问题没解决还有固定层在浏览器在正中间，而且无论怎么拖动滚动条都在正中间，在IE7下好解决：fixed就行了，但IE6就没用，麻烦事
<!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>
</head>
<body>
<script>
var size={width:0,height:0};
window.onresize=function(){
 //debugger
size.width = document.documentElement.clientWidth + "px";
 size.height =Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
onWindowResize(size);
}
function onWindowResize(size){
var _bg=document.getElementById("mybody");
if(!_bg) return;
_bg.style.width = size.width;
_bg.style.height =size.height;
}
function A(){
 var w = document.createElement("div");
 w.setAttribute("id","mybody")
 with(w.style){
 position = 'absolute';
 zIndex = '10000';
 width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
 height =Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
 position="absolute";
 left = '0';
 top = '0';
 background = '#000000';
 filter = 'Alpha(opacity=70)';
 opacity = '0.7';
 }
 document.body.appendChild(w);
 //**********************************************//
 var ig=document.createElement("div");
 ig.setAttribute("id","mypic")
 ig.innerHTML='<img src="http://www.hao123.com/images/guangg/youa.gif" onclick="C()"/>';
 document.getElementById("mybody").appendChild(ig);
 with(ig.style){
 position = 'absolute';
 zIndex = '10001';
 left = '50%';
 top = '50%';
 marginLeft = - ig.offsetWidth / 2 + 'px';
 marginTop = - ig.offsetHeight / 2 + 'px';
 }
 document.body.appendChild(ig);
}
function C(){
 document.body.removeChild(mybody);
 document.body.removeChild(mypic);
}
</script>
<a href="#" onclick="A()">点击这里弹出层</a>
 ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff ffffffffff
</body>
</html>
以上代码适用在未出现水平滚动条的情况，如果出现水平滚动条改为如下：window.onresize=function(){
    //debugger
   size.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
   size.height =Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
   onWindowResize(size);
}
呵呵，这个NB，怎么固定呢?呵呵，IE7好办，IE6不知道怎么搞