js遮罩效果
今天要实现一个 弹出框居中的问题,由于有滚动条,不知道怎么设置高度.
再次 感谢网友提供的源代码. 由于比较急,一时忘记出处,真的很抱歉.
<style> .joinclub { width: 350px; height: 60px; padding-left: 20px; padding-top: 20px; border: 1px solid #a3bad9; 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>
下面这一段代码 要放在 </body>和</html>之间
</body> <div class="joinclub" id="joinclub" style="display: none"> 我是遮罩中间的提示框 <input type="button" value="关闭我" onclick="closeCustomer()" /> </div> <div id="bg123" alt="我是遮罩的背景色" 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() { $("#joinclub").html($("#div_hid").html()); document.getElementById('joinclub').style.display = 'block'; document.getElementById('bg123').style.display = 'block'; } </script> </html>
感谢
本文来自博客园,作者:兴想事成,转载请注明原文链接:https://www.cnblogs.com/mjxxsc/p/4512000.html