自定義彈窗效果
image.png
image.png
代碼實現(xiàn)
<!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>網(wǎng)站首頁</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%;
}