<br data-mce-bogus="1"><!doctype html>
<html>
<head>
<title>典型的遮罩层实现</title>
<meta charset="utf-8">
<style>
body{ padding:0px;margin:0px;}
#a{
position:fixed;
width:100%;
height:100%;
background:rgba(200,200,200,0.6);
z-index:1;
display:none;
}
#log{
width:400px;
height:200px;
/*表单居中设置*/
position:absolute;
left:50%;
top:50%;
margin-top:-50px;
margin-left:-200px;
background:#fff;
z-index:2;
display:none;
}
.block{
cursor:pointer;
}
</style>
<div id="a"></div>
<div id="log" >
<form action='' method="" style="text-align:center;">
用户名：<input type="text" name="">
密 码：<input type="text" name="">
<input type="submit" value="提交">
<input type="button" onclick="a.style.display='none';log.style.display='none'"value="取消">
</form>
</div>
<div class="block" onclick="a.style.display='block';log.style.display='block'">显示遮罩层</div>
</head>
</html>
How to easily implement a mask layer
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=326995554&siteId=291194637
Recommended
Ranking