现在web站点中的那个半透明登录框,在此简单写一个,原理是一样的,主要为了记录与说明:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1</title>
<style type="text/css">
/* 全局外边框内边框清0 */
*{
margin: 0%;
padding: 0%;
}
/* 用户登录框大小 */
.login{
padding: 30px;
border: 1px solid purple;
300px;
margin: 100px auto;
text-align: center;
position: relative;
/* 默认不可见(重点) */
display: none;
/* 这里是设置在最上层 */
z-index: 2;
background-color: beige;
}
/* 这个是一个半透明背景 */
.bg{
100%;
height: 700px;
background-color: rgba(0,0,0,0.2);
position: absolute;
top: 0%;
/* 设置它比登录框低一层 */
z-index: 1;
/* 这是设置CSS不可见(重点) */
display: none;
}
/* 这是设置右上角那个关闭按键 */
.del{
cursor: pointer;
color: red;
position: absolute;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<!--
1,点击按钮出现半透明遮罩层和弹出框。
-->
<input type="button" class="button" value="登录">
<div class="login">
<span class="del">X</span>
帐号:<input type="text" name="" placeholder="username"> <br>
密码:<input type="password" name="" placeholder="password"><br>
<input type="button" value="登录">
</div>
<div class="bg"></div>
</body>
<script>
// 当点 登录时,修改login 与 bg 的css中属性: display= 'block'
var bot = document.querySelector(".button");
bot.onclick = function(){
var loin = document.querySelector('.login');
var bgs = document.querySelector(".bg");
loin.style.display='block';
bgs.style.display='block';
}
// 当点关闭时 修改login 与 bg 的css中属性: display= 'none'
var dell = document.querySelector(".del");
dell.onclick = function(){
var loin = document.querySelector('.login');
var bgs = document.querySelector(".bg");
loin.style.display='none';
bgs.style.display='none';
}
</script>
</html>