效果描述:点击登陆链接在本页面弹出一个登陆窗口效果,页面变灰暗,且不关闭窗口页面无法浏览。
效果图:
1.页面代码:
<body>
<!-- 登陆连接 -->
<div><a href="javascript:void(0);" οnclick="show()">登陆</a></div>
<!-- 弹出登录表单开始 -->
<div id="hsDiv" style="display:none;">
<!-- 右上角关闭按钮 -->
<div id="closediv">
<a href="javascript:void(0);" οnclick="closeDiv()"><img src="images/logingb.png">
</a>
</div>
<!-- 登陆标题 -->
<div id="dlTitle">登陆</div>
<!-- 登陆div -->
<div id="tbdiv">
<table id="logintb">
<tr>
<td class="logintd1">用户名/Email:</td>
</tr>
<tr>
<td class="logintd2"><input type="text" name="" value="">
</td>
</tr>
<tr>
<td class="logintd1">密码:</td>
</tr>
<tr>
<td class="logintd2"><input type="password" name="" value="">
</td>
</tr>
<tr>
<td class="logintd3"><input type="checkbox"> Remember
Me 记住我 <a href="">忘记密码?</a>
</td>
</tr>
<tr>
<td class="logintd4"><input type="submit" value="登 陆">
</td>
</tr>
</table>
</div>
</div>
<div id="overDiv" style="display:none;"></div>
</body>
2.CSS代码:
html,body {
width: 100%;
height: 100%;
}
*{margin: 0 auto;
padding: 0;}
#overDiv {
background-color:#000;
width: 100%;
height: 100%;
left: 0;
top: 0; /*FF IE7*/
filter: alpha(opacity = 65); /*IE*/
opacity: 0.65; /*FF*/
z-index: 110;
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*/
}
#hsDiv {
background:#fff;
z-index: 120;
width: 400px;
height: 300px;
left: 43%; /*FF IE7*/
top: 37%; /*FF IE7*/
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*/
}
.lobu {
width: 65px;
height: 25px;
background: #FFFFFF;
font-size: 13px;
border: #0099CC solid 1px;
}
/*-------登陆表单的设置------------*/
#closediv{
margin-left: 390px;
margin-top: -10px;
}
#dlTitle{
width:400px;
height: 30px;
}
#logintb{
width: 300px;
height:auto;
border: 0px;
margin-top: 5px;
}
#logintb .logintd1,#logintb .logintd3
{
height:35px;
vertical-align: bottom;
}
#logintb .logintd1
{
font-size:12px;
color: #888888;
}
#logintb .logintd3{
font-size:11px;
}
#logintb .logintd2
{
height:auto;
}
#logintb td a{
float: right;
}
.logintd2 input{
width:300px;
height: 32px;
}
.logintd4{
height: 45px;
text-align: center;
vertical-align: bottom;
}
3.js代码:
function show(){
document.getElementById("overDiv").style.display = "block" ;
document.getElementById("hsDiv").style.display = "block" ;
}
function closeDiv(){
document.getElementById("overDiv").style.display = "none" ;
document.getElementById("hsDiv").style.display = "none" ;
}