文章/答案/技术大牛

发布

问创建多个弹出按钮
EN

Stack Overflow用户

提问于 2020-12-04 13:35:40

回答 2查看 110关注 0票数 3

所以我目前在创建带有多个按钮的多个弹出窗口时遇到了一个问题。我有多个按钮，但当我单击它们时，它们都会显示相同的弹出窗口。如何为每个按钮分配不同的弹出窗口？我觉得我已经试过了所有的方法，但我似乎还是想不通。任何帮助都将不胜感激。

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>

html

button

popup

javascript

回答 2

Stack Overflow用户

发布于 2020-12-04 14:05:47

您可以将弹出数字作为参数传递给togglePopup，如下所示：

有关模板字符串here的详细信息，请参阅

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>

票数 2

Stack Overflow用户

发布于 2020-12-04 14:30:12

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

通过类名获取所有的弹出窗口、打开按钮和关闭按钮，遍历它们，然后将eventlisteners附加到每一个，然后你就完成了！

它减少的是-

不需要为每个打开和关闭按钮提供onclick。
不需要为每个弹出窗口、关闭按钮和打开按钮提供特殊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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65138460

复制

相似问题

问创建多个弹出按钮
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建多个弹出按钮EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建多个弹出按钮
EN