html遮掩层

最新推荐文章于 2021-06-03 21:44:57 发布

比丘

最新推荐文章于 2021-06-03 21:44:57 发布

阅读量542

点赞数 1

文章标签： html 测试 login class function button

本文链接：https://blog.csdn.net/q358417681/article/details/6824935

版权


<html>
	<head>
		<style type="text/css">
			body{
				margin:0px;
				padding:0px;
			}
			body *{
				margin:0px;
				padding:0px;
			}
			.zyc_div{
				background-color:#000000;
				width:100%;
				height:100%;
				position:absolute;
				top:0;
				left:0;
				z-index:999;
				display:none;
				/* 设置div透明 */
				filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
				opacity: 0.7;
				
			}
			
			.zyc_login{
				top:50%;
				left:50%;
				margin-left:-110px;   /*设置为宽度的一半*/  
				margin-top:-50px;    /*设置为高度的一半*/
				position:absolute;
				z-index:1001;
				width:210px;
				width:235px \9;
				height:100px;
				border:1px solid #666666;
				background:#ffffff;
				padding-left:25px;
				padding-top:10px;
				display:none;
				font-size:12px;
			}
			.input_text{
				width:150px;
				height:19px;
			}
			
		</style>
		<!-- 导入jQuery包 -->
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$(window).scroll(function(){
					$('.zyc_div').css({top:$(window).scrollTop()});
				});
				//显示登录
				$('.zyc_show_login').click(function(){

					$('.zyc_login').show();
					$('.zyc_div').show();
					//隐藏滚动条
					$(document.body).css({overflow:"scroll","overflow-x":"hidden","overflow-y":"hidden"});
					
				});
				//显示遮掩层
				$('.zyc_show').click(function(){
					$('.zyc_div').show();
				});
				//隐藏遮掩层
				$('.zyc_hide').click(function(){
					$('.zyc_div').hide();
				});
				//登录隐藏
				$('.zyc_login_qx').click(function(){
					$('.zyc_login').hide();
					$('.zyc_div').hide();
					$(document.body).css({overflow:"scroll","overflow-x":"auto","overflow-y":"auto"});
				});
			});
		</script>
	</head>
	<body>
		<input class="zyc_show" type="button" value="显示" />
		<input class="zyc_show_login" type="button" value="显示登录" />
		<input class="zyc_hide" style="position:absolute;z-index:1001;" type="button" value="关闭" />
		<div class="zyc_div"  >
			
		</div>
		<div class="zyc_login">
			<table style="font-size:12px;">
				<tr>
					<td colspan="2">账号：<input class="input_text" id="zyc_login_name" type="text" /></td>
				</tr>
				<tr>
					<td colspan="2">密码：<input class="input_text" id="zyc_login_pwd" type="password" /></td>
				</tr>
				<tr style="text-align:center;">
					<td colspan="2">
						<input class="zyc_login_dl" type="button" value="登录"/> 
						<input class="zyc_login_qx" type="button" value="取消" />
					</td>
				</tr>
			</table>
		</div>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
		<h1>测试</h1>
	</body>
</html>