div弹出层
来源：互联网 发布：adobe pl是什么软件 编辑：程序博客网 时间：2024/04/28 19:57
<head runat="server"> <title>DIV始终居中的半透明弹出层</title> <style type="text/css"> html, body { height: 100%; margin: 0px; font-size: 12px; } .mydiv { text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index: 999; width: 300px; height: 200px; left: 50%; top: 50%; margin-left: -150px !important; /*FF IE7 该值为本身宽的一半 */ margin-top: -60px !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*/ } .bg { display: none; background: #eeeeee; width: 100%; height: 100%; left: 0; top: 0; /*FF IE7*/ filter: alpha(opacity=50); /*IE*/ z-index: 1; 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); } </style> <style> body, p { margin: 0; padding: 0; text-align: center; font: normal 14px/180% Tahoma,sans-serif; } #loginBox { margin: 0 auto; padding: 0px; border: 1px solid #829AFF; filter: alpha(opacity=90); } #loginBox .title { text-align: left; padding-left: 10px; font-size: 11pt; border-bottom: 1px solid #829AFF; height: 25px; line-height: 25px; cursor: move; } #loginBox .t1 { float: left; font-weight: bold; text-decoration: none; } #loginBox .t2 { float: right; text-align: center; line-height: 18px; height: 18px; width: 18px; margin-top: 3px; margin-right: 2px; overflow: hidden; border: 1px solid #FF5889; cursor: pointer; } #loginBox .login { text-align: center; width: 100%; height: 100%; } input.submit { float: right; border: 1px solid #829AFF; font-size: 9pt; height: 20px; margin-top: 5px; margin-right: 70px; } </style> <script language="javascript" type="text/javascript"> function showDiv() { document.getElementById('loginBox').style.display = 'block'; document.getElementById('bg').style.display = 'block'; } function closeDiv() { document.getElementById('loginBox').style.display = 'none'; document.getElementById('bg').style.display = 'none'; } </script></head><body> <div id="loginBox" class="mydiv" style="display: none; background: #eeeeee;"> <p class="title" id="Mdown"> <span class="t1">登录</span><span class="t2" title="关闭" onclick="javascript:closeDiv()">X</span></p> <div class="login" style="z-index: 1000;"> <form method="post" action="#"> 用户名:<input type="text" name="UserName" size="12" maxlength="10" value=""><div class="login"> 密 码:<input type="text" name="Password" size="12" maxlength="10"></div> <input class="submit" type="submit" value="登录"></form> </div> </div> <div id="bg" class="bg" style="display: none;"> </div> <a href="javascript:showDiv()">点击这里弹出层</a></body>
