一、效果显示
二、代码实现
1.网页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/demo01.css">
</head>
<body>
<div class="bg">
<div class="layout">
<div class="logo">
<img src="./images/微信图片_20250419193230.jpg" alt="">
</div>
<div class="denglu">
登录
</div>
</div>
</div>
<!--自定义弹窗-->
<div class="box-bg">
<div class="box">
<div class="header">
<span class="close">关闭</span>
</div>
</div>
</div>
<script src="./js/demo01.js"></script>
</body>
</html>
2.css样式面
···
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%
}
html, body{
width: 100%;
height: 100%;
}
.bg{
width:100%;
height: 100%;
}
.layout{
width: 90%;
height: 100%;
margin:0 auto;
display:flex;
justify-content:space-between;
}
.logo img{
width: 6rem;
height: 6rem;
border-radius: 50%;
}
.denglu{
font-size: 1.8rem;
cursor: pointer;
}
.denglu:hover{
font-weight: 700;
}
.box-bg{
display: none;
width: 100%;
height: 100%;
position:absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
}
.box{
width: 50rem;
height: 30rem;
background-color: azure;
margin:10px auto;
}
.header{
width: 100%;
height: 5rem;
display: flex;
flex-direction: row-reverse;
align-items: center;
font-size:1.8rem;
margin-right: 1rem;
cursor: pointer;
}
···
3.js样式
···
let denglu = document.querySelector(".denglu")
let close = document.querySelector(".close")
let box = document.querySelector(".box-bg")
denglu.onclick = function(){
box.style.display = "block"
}
close.onclick = function(){
box.style.display = "none"
}
···
