1.用户点击登录时，页面打开一个悬浮窗的登录窗口
2.悬浮窗中点击关闭可以关闭悬浮窗，重新显示网页页面
效果展示：
代码实现：
HTML：
<!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/demo04.css">
</head>
<body>
<!-- 背景层 -->
<div class="bg">
<!-- 布局层 -->
<div class="layout">
<!-- 内容层 -->
<div class="logo">
<img src="./images/2.webp" 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="./demo04.js"></script>
</body>
</html>
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"
}
css：
1：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
html, body{
height: 100%;
width: 100%;
}
2：
.bg{
width:100%;
height:5rem;
background-color: orange;
}
.layout{
width:90%;
height:100%;
/* background-color:aquamarine; */
/* margin: 上下边距0 左右边距auto-自动-居中 */
margin: 0 auto;
/* 处理内容对齐 */
display:flex;
justify-content: space-between;
align-items:center;
}
.logo img{
width: 4rem;
height: 4rem;
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;
/* rgba(红，绿，蓝，透明度(0~1)) */
background-color: rgba(0,0,0,0.5);
}
.box{
width: 50rem;
height: 30rem;
background-color: #fff;
/* 外边距：上下100像素，左右居中 */
margin: 100px auto;
}
.header{
width:100%;
height:5rem;
background-color:aquamarine;
display:flex;
flex-direction: row-reverse;
align-items: center;
font-size:1.8rem;
cursor: pointer;
}
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
