如何简单的实现一个遮罩层

最新推荐文章于 2022-09-06 10:58:42 发布

罗正波

最新推荐文章于 2022-09-06 10:58:42 发布

阅读量1.3k

点赞数 1

分类专栏： js 文章标签： js ViewUI

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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" οnclick="a.style.display='none';log.style.display='none'" value="取消">
</form>
</div>

<div class="block" οnclick="a.style.display='block';log.style.display='block'">显示遮罩层</div>
</head>
</html>