自定义弹窗效果
image.png
image.png
代码实现
<!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/index.css">
</head>
<body>
<!-- 背景层 -->
<div class="page-header-bg">
<!-- 布局层 -->
<div class="page-header-layout">
<!-- 内容层 -->
<div>logo</div>
<div id="denglu">登录</div>
</div>
</div>
<h2>网站首页</h2>
<!-- 自定义登录弹窗 -->
<!-- 背景层 -->
<div class="login-box">
<!-- 布局层 -->
<div class="login">
<div class="header">
<span id="guanbi">[关闭]</span>
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
```index.js
let a =document.querySelector("#denglu");
let b =document.querySelector("#guanbi");
let c =document.querySelector(".login-box");
//点击登录，打开弹窗
a.onclick = function(){
//修改自定义弹窗样式
c.style.display = "block";
}
//点击关闭，关闭弹窗
b.onclick = function(){
//修改自定义弹窗样式
c.style.display = "none";
}
```index.css
.page-header-bg{
height:5rem;
width:100%;
background-color: orange;
}
.page-header-layout{
width:90%;
height:100%;
background-color:antiquewhite;
margin: 0 auto;
display:flex;
justify-content: space-between;
align-items: center;
}
/** * * * * * * * 自定义弹窗样式 * * * * * */
.login-box{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color:rgba(0,0,0,0.6);
/* 隐藏弹窗 */
display:none;
}
.login{
width:50rem;
height:30rem;
background-color: #fff;
/* 外边距：上下100px，左右auto自动-居中 */
margin: 10rem auto;
}
.header{
height: 3rem;
background-color: orange;
display:flex;
flex-direction: row-reverse;
align-items: center;
}
.header span{
cursor: pointer;
}
```style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
html,body{
width: 100%;
height: 100%;
}