点击登陆链接在本页面弹出一个登陆窗口效果

最新推荐文章于 2024-04-14 11:46:37 发布

ws喜欢木偶的孩子

最新推荐文章于 2024-04-14 11:46:37 发布

阅读量1.2w

点赞数 5

分类专栏： JS HTML+CSS Web前端文章标签： javascript html css Web

本文链接：https://blog.csdn.net/wsjavavip/article/details/12174947

版权

HTML+CSS 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

Web前端

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

效果描述：点击登陆链接在本页面弹出一个登陆窗口效果，页面变灰暗，且不关闭窗口页面无法浏览。

效果图：

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" ;
	}