弹出层始终出现在屏幕中间可如下操作： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .joinclub { width: 440px; height: 282px; border: 1px solid #6E665A; border-radius: 5px; background: #fff; padding-top: 10px; position: absolute; z-index: 99999999; display: none; left: 50%;/*FF IE7*/ top: 50%;/*FF IE7*/ margin-left: -220px!important;/*FF IE7 该值为本身宽的一半 */ margin-top: -140px!important;/*FF IE7 该值为本身高的一半*/ margin-top: 0px; position: fixed!important;/*FF IE7*/ position: absolute;/*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ } .bg123 { background-color: #ccc; width: 100%; height: 100%; z-index: 99999998; left: 0; top: 0;/*FF IE7*/ filter: alpha(opacity=50);/*IE*/ opacity: 0.5;/*FF*/ position: fixed!important;/*FF IE7*/ position: absolute;/*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ } </style> </head>
<body> <div style="width:100%; height:500px; border:1px solid red"></div> <a href="#" onclick="join_club()">点击我</a> </body> <div class="joinclub" id="joinclub" style="display:none">我是弹出菜单<input type="button" value="关闭我" onclick="closeCustomer()" /></div> <div id="bg123" class="bg123" style="display:none;"></div> <script type="text/javascript"> function closeCustomer(){ document.getElementById("joinclub").style.display='none'; document.getElementById("bg123").style.display='none'; } function join_club() { document.getElementById('joinclub').style.display = 'block'; document.getElementById('bg123').style.display = 'block'; } </script> </html>
|