level 2
逻辑思路清晰了，实现起来很简单的
2020年12月11日 01点12分
level 7
level 10
点击按钮的时候出来一个全屏的div，它里面包含一个小的div和一个全屏的蒙版，把小div 的z-index设置高一点，点击蒙版就隐藏div
2020年12月11日 02点12分
3
![[蛋糕]](/static/emoticons/u86cbu7cd5.png)
level 12
我觉得用事件委托吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#mask {
display: none;
position: absolute;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 100%;
}
.box-login {
width: 400px;
height: 220px;
border-radius: 10px;
box-shadow: 0 0 30px #ccc;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
margin: -110px 0 0 -200px;
background-color: pink;
}
</style>
</head>
<body>
<input type="button" onclick="fnLoin()" value="demo" />
<div id="mask">
<div class="box-login">
<div style="padding: 10px 20px;">
用户: <input type="text" value="" />
<br />
密码: <input type="text" value="" />
<div><button type="submit">登录</button></div>
</div>
</div>
</div>
<script>
var oIdMask = document.getElementById('mask');
function fnLoin() {
oIdMask.style.display = 'block';
}
oIdMask.onclick = function(e) {
if (e.target === oIdMask) oIdMask.style.display = 'none';
};
</script>
</body>
</html>
2020年12月12日 13点12分
5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#mask {
display: none;
position: absolute;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 100%;
}
.box-login {
width: 400px;
height: 220px;
border-radius: 10px;
box-shadow: 0 0 30px #ccc;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
margin: -110px 0 0 -200px;
background-color: pink;
}
</style>
</head>
<body>
<input type="button" onclick="fnLoin()" value="demo" />
<div id="mask">
<div class="box-login">
<div style="padding: 10px 20px;">
用户: <input type="text" value="" />
<br />
密码: <input type="text" value="" />
<div><button type="submit">登录</button></div>
</div>
</div>
</div>
<script>
var oIdMask = document.getElementById('mask');
function fnLoin() {
oIdMask.style.display = 'block';
}
oIdMask.onclick = function(e) {
if (e.target === oIdMask) oIdMask.style.display = 'none';
};
</script>
</body>
</html>
谢谢
2020年12月16日 02点12分