Web按钮只能使用一次，然后我必须刷新页面
[英]Web button only works once, then I have to refresh page
问题描述
我对网络开发有点陌生。 作为我的第一个 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>
3 个解决方案
解决方案1
5 2022-06-21 10:29:23
问题是，两个按钮都按下添加类但没有删除计数器类。 最简单的解决方案是使用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>
解决方案2
2 2022-06-21 10:31:24
这是因为您正在添加open类和overlay-open类，并且永远不会删除它们。 因此，在关闭后，您在<div class="popup">上有open和popClose ，在 <div class= <div class="overlay"> > 上有了overlay-open和overlay-close 。
而 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>
解决方案3
2 2022-06-21 10:33:27
您必须在每个函数执行后删除旧类才能正常工作。
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>
刷新/进入网站后，如何让静音/取消静音按钮仅出现在页面的适当部分？
[英]How to let mute/unmute button appears only in a proper section of the page once I refresh/enter the site?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.