创建多个弹出菜单按钮

Question

我目前面临一个问题，需要创建多个弹出框和多个按钮。我已经创建了多个按钮，但是当我点击它们时，它们都显示相同的弹出框。如何将不同的弹出框分配给每个按钮？我感觉我已经尝试了所有方法，但仍然无法解决它。非常感谢任何帮助。

function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
document.getElementById("popup-2").classList.toggle("active");
document.getElementById("popup-3").classList.toggle("active");
document.getElementById("popup-4").classList.toggle("active");
document.getElementById("popup-5").classList.toggle("active");
document.getElementById("popup-6").classList.toggle("active");
document.getElementById("popup-7").classList.toggle("active");
document.getElementById("popup-8").classList.toggle("active");
document.getElementById("popup-9").classList.toggle("active");
}

.popup .overlay {
    position:fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.7);
    z-index:1;
    display:none;
}

.popup .content {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    background:#fff;
    width:350px;
    height: 220px;
    z-index:2;
    text-align:center;
    padding:20px;
    box-sizing:border-box;
}

.popup .close-btn{
    cursor:pointer;
    position:absolute;
    right: 20px;
    top:20px;
    width:30px;
    height:30px;
    background: #222;
    color: #fff;
    font-size:25px;
    font-weight:600;
    line-weight:30px;
    text-align:center;
    border-radius:50%;
    
}

.popup.active .overlay{
    display:block;
}

.popup.active .content{
    transition:all 300ms ease-in-out;
    transform:translate(-50%,-50%) scale(1);
}

<div class="popup" id="popup-1">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">&times;</div>
    <h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.      
    
  </div>
    </div>
    
    <div class="popup" id="popup-2">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">&times;</div>
    <h2> Fun Fact 2</h2>     
    
  </div>
    </div>
    
        <div class="popup" id="popup-3">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">&times;</div>
    <h2> Fun Fact 3</h2>     
    
  </div>
    </div>
    
        <div class="popup" id="popup-4">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">&times;</div>
    <h2> Fun Fact 4</h2>    
    
  </div>
    </div>
    
        <div class="popup" id="popup-5">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">&times;</div>
    <h2> Fun Fact 5</h2>
    
  </div>
    </div>
    
        <div class="popup" id="popup-6">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">&times;</div>
    <h2> Fun Fact 6</h2>
    
  </div>
    </div>
    
        <div class="popup" id="popup-7">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">&times;</div>
    <h2> Fun Fact 7</h2>
    
  </div>
    </div>
    
        <div class="popup" id="popup-8">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">&times;</div>
    <h2> Fun Fact 8</h2>
    
  </div>
    </div>
    
        <div class="popup" id="popup-9">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">&times;</div>
    <h2> Fun Fact 9</h2>
    
  </div>
    </div>
    
    
<div class="btn-container">
            <button onclick="togglePopup()" class="btn btn1">Un</button>
            <button onclick="togglePopup()" class="btn btn2">Dois</button>
            <button onclick="togglePopup()" class="btn btn3">Tres</button>
        <br><br>
            <button onclick="togglePopup()" class="btn btn4">Quatro</button>
            <button onclick="togglePopup()" class="btn btn5">Cinco</button>
            <button onclick="togglePopup()" class="btn btn6">Seis</button>
        <br><br>
            <button onclick="togglePopup()" class="btn btn7">Sete</button>
            <button onclick="togglePopup()" class="btn btn8">Oito</button>
            <button onclick="togglePopup()" class="btn btn9">Nove</button>
    <br><br><br><br><br>
    </div>

- DaiJah M

---

提示：你的popup()函数如何知道要打开哪个弹出窗口？如果同时打开所有弹出窗口会发生什么？ - The Grand J

Answer 1

您可以将弹出窗口的数字作为参数传递给togglePopup，例如：

• 有关模板字符串的更多信息，请在这里查看

function togglePopup(num){
document.getElementById(`popup-${num}`).classList.toggle("active"); 
}

.popup .overlay {
    position:fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.7);
    z-index:1;
    display:none;
}

.popup .content {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    background:#fff;
    width:350px;
    height: 220px;
    z-index:2;
    text-align:center;
    padding:20px;
    box-sizing:border-box;
}

.popup .close-btn{
    cursor:pointer;
    position:absolute;
    right: 20px;
    top:20px;
    width:30px;
    height:30px;
    background: #222;
    color: #fff;
    font-size:25px;
    font-weight:600;
    line-weight:30px;
    text-align:center;
    border-radius:50%;
    
}

.popup.active .overlay{
    display:block;
}

.popup.active .content{
    transition:all 300ms ease-in-out;
    transform:translate(-50%,-50%) scale(1);
}

<div class="popup" id="popup-1">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('1')">&times;</div>
    <h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.      
    
  </div>
    </div>
    
    <div class="popup" id="popup-2">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('2')">&times;</div>
    <h2> Fun Fact 2</h2>     
    
  </div>
    </div>
    
        <div class="popup" id="popup-3">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('3')">&times;</div>
    <h2> Fun Fact 3</h2>     
    
  </div>
    </div>
    
        <div class="popup" id="popup-4">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('4')">&times;</div>
    <h2> Fun Fact 4</h2>    
    
  </div>
    </div>
    
        <div class="popup" id="popup-5">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('5')">&times;</div>
    <h2> Fun Fact 5</h2>
    
  </div>
    </div>
    
        <div class="popup" id="popup-6">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('6')">&times;</div>
    <h2> Fun Fact 6</h2>
    
  </div>
    </div>
    
        <div class="popup" id="popup-7">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('7')">&times;</div>
    <h2> Fun Fact 7</h2>
    
  </div>
    </div>
    
        <div class="popup" id="popup-8">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('8')">&times;</div>
    <h2> Fun Fact 8</h2>
    
  </div>
    </div>
    
        <div class="popup" id="popup-9">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('9')">&times;</div>
    <h2> Fun Fact 9</h2>
    
  </div>
    </div>
    
    
<div class="btn-container">
            <button onclick="togglePopup('1')" class="btn btn1">Un</button>
            <button onclick="togglePopup('2')" class="btn btn2">Dois</button>
            <button onclick="togglePopup('3')" class="btn btn3">Tres</button>
        <br><br>
            <button onclick="togglePopup('4')" class="btn btn4">Quatro</button>
            <button onclick="togglePopup('5')" class="btn btn5">Cinco</button>
            <button onclick="togglePopup('6')" class="btn btn6">Seis</button>
        <br><br>
            <button onclick="togglePopup('7')" class="btn btn7">Sete</button>
            <button onclick="togglePopup('8')" class="btn btn8">Oito</button>
            <button onclick="togglePopup('9')" class="btn btn9">Nove</button>
    <br><br><br><br><br>
    </div>

- KcH

Answer 2

一个非常简短而有效的解决方案 -

通过类名获取所有弹出窗口、打开按钮和关闭按钮，循环遍历它们，为每个添加事件监听器，然后你就完成了！

它能减少什么 -

1. 不需要为每个打开和关闭按钮设置 onclick。 2. 不需要为每个弹出窗口、关闭按钮和打开按钮设置特殊 id。

这大大减小了你的 html 大小。

另一个优点 - 将来，如果你想添加更多的弹出窗口，无需修改 JS，现有代码将处理它。

function togglePopup(num){
  popups[num].classList.toggle("active"); 
}

let popups = document.getElementsByClassName("popup");
let closeBtns = document.getElementsByClassName("close-btn");
let openBtns = document.getElementsByClassName("btn");

for(let i = 0; i<closeBtns.length; i++){
  closeBtns[i].addEventListener("click", function(){togglePopup(i)});
  openBtns[i].addEventListener("click", function(){togglePopup(i)});
}

.popup .overlay {
    position:fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.7);
    z-index:1;
    display:none;
}

.popup .content {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    background:#fff;
    width:350px;
    height: 220px;
    z-index:2;
    text-align:center;
    padding:20px;
    box-sizing:border-box;
}

.popup .close-btn{
    cursor:pointer;
    position:absolute;
    right: 20px;
    top:20px;
    width:30px;
    height:30px;
    background: #222;
    color: #fff;
    font-size:25px;
    font-weight:600;
    line-height:30px;
    text-align:center;
    border-radius:50%;
    
}

.popup.active .overlay{
    display:block;
}

.popup.active .content{
    transition:all 300ms ease-in-out;
    transform:translate(-50%,-50%) scale(1);
}

<div class="popup">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn">&times;</div>
    <h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.      
    
  </div>
    </div>
    
    <div class="popup">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn">&times;</div>
    <h2> Fun Fact 2</h2>     
    
  </div>
    </div>
    
        <div class="popup">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn">&times;</div>
    <h2> Fun Fact 3</h2>     
    
  </div>
    </div>
    
        <div class="popup">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn">&times;</div>
    <h2> Fun Fact 4</h2>    
    
  </div>
    </div>
    
        <div class="popup">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn">&times;</div>
    <h2> Fun Fact 5</h2>
    
  </div>
    </div>
    
        <div class="popup">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn">&times;</div>
    <h2> Fun Fact 6</h2>
    
  </div>
    </div>
    
        <div class="popup">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn">&times;</div>
    <h2> Fun Fact 7</h2>
    
  </div>
    </div>
    
        <div class="popup">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn">&times;</div>
    <h2> Fun Fact 8</h2>
    
  </div>
    </div>
    
        <div class="popup">
    <div class="overlay"></div>
<div class="content">
<div class="close-btn">&times;</div>
    <h2> Fun Fact 9</h2>
    
  </div>
    </div>
    
    
<div class="btn-container">
            <button class="btn">Un</button>
            <button class="btn">Dois</button>
            <button class="btn">Tres</button>
        <br><br>
            <button class="btn">Quatro</button>
            <button class="btn">Cinco</button>
            <button class="btn">Seis</button>
        <br><br>
            <button class="btn">Sete</button>
            <button class="btn">Oito</button>
            <button class="btn">Nove</button>
    <br><br><br><br><br>
    </div>

- Praneet Dixit