最近参考网上的一些教程做了一个简单的弹出窗，并且可以根据这个简易的弹出窗进行相应修改，应用到其他的项目里：
首先新建一个index.html文件和一个css文件，
CSS代码：
*{
font-family: 'Poppins',sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: none;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: all .2s linear;
}
.container{
min-height: 100vh;
display: grid;
place-items: center;
padding-bottom: 60px;
background: #fbb45f;
}
.container .open-btn{ //弹出窗打开按钮
background-color: #fff;
color: rgb(173, 223, 24);
border-radius: 15px;
height: 50px;
width: 200px;
font-size: 28px;
text-align: center;
box-shadow: 0 10px 15px rgba(0,0,0,.2);
cursor: pointer;
}
.container .open-btn:hover{ //鼠标悬停
letter-spacing: 1px;
}
.container .open-btn:active{
box-shadow: none;
transform: scale(.9);
}
.cookies-box{ //弹出窗
position:fixed;
bottom: 100px;
left: -400px;
z-index: 1000;
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 15px rgba(0,0,0,.2);
text-align: center;
padding:30px;
}
.cookies-box.active{
left: 20px;
}
/* 弹出窗里插入的图片，设置一个旋转效果 */
.cookies-box img{
height: 110px;
animation: image 10s linear infinite;
}
@keyframes image{
0%{
transform: rotate(360deg);
}
}
.cookies-box h3{
color:#333;
font-size: 23px;
padding: 5px 0;
}
.cookies-box p{
color:#666;
font-size: 13px;
padding: 5px 0;
line-height: 1.8;
}
.cookies-box .accept{
background: #fbb45f;
color: #fff;
border-radius: 5px;
display: block;
margin: 15px 0;
padding: 10px;
}
.cookies-box .accept:hover{
letter-spacing: 1px;
opacity: .8;
}
.cookies-box .setting{
color: #999;
}
.cookies-box .setting:hover{
color:#fbb45f;
}
.cookies-box .close-btn{
position: absolute;
top: -2px;
right: 12px;
font-size:30px;
color: #dc3545;
cursor: pointer;
}
.cookies-box .close-btn:hover{
color: #333;
}
弹出窗html 主体代码：
<body>
<div class="container">
<div class="open-btn">show popup</div>
</div>
<div class="cookies-box">
<span class="close-btn">×</span>
<img src="../弹出框1.0/饼干.png" alt="">
<h3>cookies and privacy</h3>
<p></p>
<a href="#" class="accept">accept all cookies</a>
<a href="#" class="setting">customize settings</a>
</div>
</body>
用querySelector()选择器获取一个Button并且为Button绑一个onclick事件（打开弹出窗）：
document.querySelector('.open-btn').onclick = () =>{
document.querySelector('.cookies-box').classList.add('active');
}
用querySelector()选择器获取一个Button并且为Button绑一个onclick事件（关闭弹出窗）：
document.querySelector('.close-btn').onclick = () =>{
document.querySelector('.cookies-box').classList.remove('active');
}
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../弹出框1.0/T.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="open-btn">show popup</div>
</div>
<div class="cookies-box">
<span class="close-btn">×</span>
<img src="../弹出框1.0/饼干.png" alt="">
<h3>cookies and privacy</h3>
<p></p>
<a href="#" class="accept">accept all cookies</a>
<a href="#" class="setting">customize settings</a>
</div>
<script>
document.querySelector('.open-btn').onclick = () =>{
document.querySelector('.cookies-box').classList.add('active');
}
document.querySelector('.close-btn').onclick = () =>{
document.querySelector('.cookies-box').classList.remove('active');
}
</script>
</body>
</html>
效果：
应用到其他项目修改后的弹出窗效果展示：
总结：
学习永无止境，不要因为事情的难易程度去决定做不做！
本文含有隐藏内容，请 开通VIP 后查看