弹出层居中,兼容ie6、7、8、ff。 当滚动条滚动时,仍然居中. <html> <head> <meta http-equiv="content-type" content=" text/html; charset=utf-8"/> <title>弹出层</title> <mce:style type="text/css"><!-- #lookdiv { display:none; background-color:#CD67DC; width:200px; height:100px; position:absolute ; } #closediv { width:40px; height:20px; float:right; background-color:#C2C2C2; } #clickfont { width:50px; height:50px; margin-left:500px; } --></mce:style><style type="text/css" mce_bogus="1">#lookdiv { display:none; background-color:#CD67DC; width:200px; height:100px; position:absolute ; } #closediv { width:40px; height:20px; float:right; background-color:#C2C2C2; } #clickfont { width:50px; height:50px; margin-left:500px; }</style> <mce:script language="javascript" type="text/javascript"><!-- function showdiv() { /*alert("滚动条高"+document.body.scrollTop); alert("屏幕高"+document.body.clientHeight);*/ var h=document.body.scrollTop+document.body.clientHeight/2; //alert("屏幕宽"+document.body.clientWidth); var w=document.body.clientWidth/2.5; document.getElementById("lookdiv").style.display="block"; document.getElementById("lookdiv").style.top=h; document.getElementById("lookdiv").style.left=w; document.body.style.backgroundColor="#080808"; } //关闭lookdiv function closelookdiv() { document.getElementById("lookdiv").style.display="none"; document.body.style.backgroundColor="#fff"; } function lookdivd() { //判断lookdiv是否显示了 if(document.getElementById("lookdiv").style.display=="block") { showdiv(); } } //滚动条滑动时 window.οnscrοll=lookdivd; // --></mce:script> </head> <body> <br /> <br /> <br /> <div id="clickfont" onClick="showdiv()">点击看弹出层</div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </p> <div id="clickfont" onClick="showdiv()">点击看弹出层</div> <div id="lookdiv"> <div id="closediv" onClick="closelookdiv()" >关闭</div> <p align="center">出来了哈!!!</p> <p style="clear:both" mce_style="clear:both"></p> </div> </body> </html> 其实看着下面的图片,就明白了!