小贝子编程

Web按钮只工作一次，然后我必须刷新页面



我对web开发有点陌生。作为我使用JS的第一个项目，我决定创建一个简单的按钮，如果有人点击它，它会显示一个自定义的弹出窗口。但问题是，在关闭弹出窗口后，我必须刷新页面才能再次点击按钮。

下面是我的代码: 

const btn = document.querySelector('.btn');
const cloBtn = document.querySelector('.close');
const popUp = document.querySelector('.popup');
const overlay = document.querySelector('.overlay');
btn.addEventListener('click', () => {
popUp.classList.add('open');
overlay.classList.add('overlay-open');
});
cloBtn.addEventListener('click', () => {
popUp.classList.add('popClose');
overlay.classList.add('overlay-close');
})
body {
margin: 0%;
}
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
button {
border: none;
cursor: pointer;
}
.btn button {
background-color: blue;
padding: 15px 45px 15px 45px;
font-size: large;
font-weight: 700;
color: rgb(255, 255, 255);
border-radius: 10px;
}
.popup {
width: 300px;
background-color: rgb(228, 228, 228);
height: 150px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 15px;
border-radius: 10px;
z-index: 5;
position: absolute;
top: 30%;
left: 50%;
transform: scale(1) translate(-50%, -50%);
visibility: hidden;
}
.popup button {
background-color: rgb(255, 0, 55);
padding: 10px 30px 10px 30px;
font-size: medium;
font-weight: 700;
color: rgb(0, 0, 0);
border-radius: 10px;
}
.overlay {
height: 100%;
width: 100%;
background-color: rgba(133, 131, 131, 0.555);
position: absolute;
z-index: 2;
visibility: hidden;
}
.overlay-open {
visibility: visible;
}
.overlay-close {
visibility: hidden;
}
.open {
visibility: visible;
animation: boxPop 0.3s ease-in;
}
@keyframes boxPop {
from {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
to {
position: absolute;
top: 30%;
left: 50%;
transform: scale(1) translate(-50%, -50%);
}
}
.popClose {
animation: boxClo 0.3s ease-in;
transform: translate(-50%, -50%) scale(0);
}
@keyframes boxClo {
from {
position: absolute;
top: 30%;
left: 50%;
transform: scale(1) translate(-50%, -50%);
}
to {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
}
<!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="style.css">
<title>Document</title>
</head>
<body>
<div class="btn"><button>Press Me</button></div>
<div class="popup">
<div class="sentence">Hello Nice to Meet You!</div>
<div class="close"><button>Close</button></div>
</div>
<div class="overlay"></div>
<script src="app.js"></script>
</body>
</html>

问题是，两个按钮都添加了一个类，但没有删除计数器类。最简单的解决方案是使用toggle。在这种情况下，你可以绑定相同的eventListener到两个按钮，并大大缩短JS代码:

const btn = document.querySelectorAll('.btn');
const popUp = document.querySelector('.popup');
const overlay = document.querySelector('.overlay');
btn.forEach(el => el.addEventListener('click', () => {
popUp.classList.toggle('open');
overlay.classList.toggle('overlay-open');
}));
body {
margin: 0%;
}
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
button {
border: none;
cursor: pointer;
}
.btn button {
background-color: blue;
padding: 15px 45px 15px 45px;
font-size: large;
font-weight: 700;
color: rgb(255, 255, 255);
border-radius: 10px;
}
.popup {
width: 300px;
background-color: rgb(228, 228, 228);
height: 150px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 15px;
border-radius: 10px;
z-index: 5;
position: absolute;
top: 30%;
left: 50%;
transform: scale(1) translate(-50%, -50%);
visibility: hidden;
}
.popup button {
background-color: rgb(255, 0, 55);
padding: 10px 30px 10px 30px;
font-size: medium;
font-weight: 700;
color: rgb(0, 0, 0);
border-radius: 10px;
}
.overlay {
height: 100%;
width: 100%;
background-color: rgba(133, 131, 131, 0.555);
position: absolute;
z-index: 2;
visibility: hidden;
}
.overlay-open {
visibility: visible;
}
.overlay-close {
visibility: hidden;
}
.open {
visibility: visible;
animation: boxPop 0.3s ease-in;
}
@keyframes boxPop {
from {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
to {
position: absolute;
top: 30%;
left: 50%;
transform: scale(1) translate(-50%, -50%);
}
}
.popClose {
animation: boxClo 0.3s ease-in;
transform: translate(-50%, -50%) scale(0);
}
@keyframes boxClo {
from {
position: absolute;
top: 30%;
left: 50%;
transform: scale(1) translate(-50%, -50%);
}
to {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
}
<!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="style.css">
<title>Document</title>
</head>
<body>
<div class="btn"><button>Press Me</button></div>
<div class="popup">
<div class="sentence">Hello Nice to Meet You!</div>
<div class="btn"><button>Close</button></div>
</div>
<div class="overlay"></div>
<script src="app.js"></script>
</body>
</html>

必须在每次函数执行后删除旧类才能正常工作 

const btn= document.querySelector('.btn');
const cloBtn=document.querySelector('.close');
const popUp=document.querySelector('.popup');
const overlay=document.querySelector('.overlay');
btn.addEventListener('click',()=>{
popUp.classList.add('open'); 
overlay.classList.add('overlay-open'); 
popUp.classList.remove('popClose');
overlay.classList.remove('overlay-close')

});
cloBtn.addEventListener('click',()=>{
popUp.classList.remove('open'); 
overlay.classList.remove('overlay-open');
popUp.classList.add('popClose');
overlay.classList.add('overlay-close');

})
body{
margin: 0%;
}
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
}
button{
border: none;
cursor: pointer;
}
.btn button{
background-color: blue;
padding: 15px 45px 15px 45px;
font-size: large;
font-weight: 700;
color: rgb(255, 255, 255);
border-radius: 10px;
}
.popup{
width: 300px;
background-color: rgb(228, 228, 228);
height: 150px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 15px;
border-radius:10px ;
z-index: 5;
position: absolute;
top: 30%;
left: 50%;
transform:scale(1) translate(-50% ,-50%);
visibility: hidden;
}
.popup button{
background-color: rgb(255, 0, 55);
padding: 10px 30px 10px 30px;
font-size: medium;
font-weight: 700;
color: rgb(0, 0, 0);
border-radius: 10px;
}
.overlay{
height: 100%;
width: 100%;
background-color: rgba(133, 131, 131, 0.555);
position: absolute;
z-index: 2;
visibility: hidden;
}
.overlay-open{
visibility: visible;
}
.overlay-close{
visibility: hidden;
}
.open{
visibility: visible;
animation: boxPop 0.3s ease-in;
}
@keyframes boxPop {
from {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50% ,-50%) scale(0);
}
to {
position: absolute;
top: 30%;
left: 50%;
transform:scale(1) translate(-50% ,-50%);
}
}
.popClose{
animation: boxClo 0.3s ease-in;
transform:translate(-50% ,-50%) scale(0);
}
@keyframes boxClo {
from {
position: absolute;
top: 30%;
left: 50%;
transform:scale(1) translate(-50% ,-50%);

}
to {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50% ,-50%) scale(0);
}
}
<!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="style.css">
<title>Document</title>
</head>
<body>
<div class="btn"><button>Press Me</button></div>
<div class="popup">
<div class="sentence">Hello Nice to Meet You!</div>
<div class="close"><button>Close</button></div>
</div>
<div class="overlay"></div>
<script src="app.js"></script>
</body>
</html>

这是因为您正在添加open和overlay-open类，而从未删除它们。按下键后，open和popClose在<div class="popup">上，overlay-open和overlay-close在<div class="overlay">上。

和CSS的特殊性使得第二个类适用。你可以这样做，有2个类而不是4个。你只需要open和overlay-open。

const btn= document.querySelector('.btn');
const cloBtn=document.querySelector('.close');
const popUp=document.querySelector('.popup');
const overlay=document.querySelector('.overlay');
btn.addEventListener('click',()=>{
popUp.classList.add('open'); 
overlay.classList.add('overlay-open'); 

});
cloBtn.addEventListener('click',()=>{
popUp.classList.remove('open'); 
overlay.classList.remove('overlay-open'); 

})
body{
margin: 0%;
}
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
}
button{
border: none;
cursor: pointer;
}
.btn button{
background-color: blue;
padding: 15px 45px 15px 45px;
font-size: large;
font-weight: 700;
color: rgb(255, 255, 255);
border-radius: 10px;
}
.popup{
width: 300px;
background-color: rgb(228, 228, 228);
height: 150px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 15px;
border-radius:10px ;
z-index: 5;
position: absolute;
top: 30%;
left: 50%;
transform:scale(1) translate(-50% ,-50%);
visibility: hidden;
}
.popup button{
background-color: rgb(255, 0, 55);
padding: 10px 30px 10px 30px;
font-size: medium;
font-weight: 700;
color: rgb(0, 0, 0);
border-radius: 10px;
}
.overlay{
height: 100%;
width: 100%;
background-color: rgba(133, 131, 131, 0.555);
position: absolute;
z-index: 2;
visibility: hidden;
}
.overlay-open{
visibility: visible;
}
/*
.overlay-close{
visibility: hidden;
}*/
.open{
visibility: visible;
animation: boxPop 0.3s ease-in;
}
@keyframes boxPop {
from {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50% ,-50%) scale(0);
}
to {
position: absolute;
top: 30%;
left: 50%;
transform:scale(1) translate(-50% ,-50%);
}
}
/*
.popClose{
animation: boxClo 0.3s ease-in;
transform:translate(-50% ,-50%) scale(0);
}*/
@keyframes boxClo {
from {
position: absolute;
top: 30%;
left: 50%;
transform:scale(1) translate(-50% ,-50%);

}
to {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50% ,-50%) scale(0);
}
}
<!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="style.css">
<title>Document</title>
</head>
<body>
<div class="btn"><button>Press Me</button></div>
<div class="popup">
<div class="sentence">Hello Nice to Meet You!</div>
<div class="close"><button>Close</button></div>
</div>
<div class="overlay"></div>
<script src="app.js"></script>
</body>
</html>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium