Creating multiple pop up buttons

user_14761059 0
Viewed 734

so I'm currently having an issue with creating multiple popups with multiple buttons. I have multiple buttons up but when I click them they all show the same pop-up. How do I assign different pop-ups to each button? I feel like I've tried everything and I can't seem to figure it out. Any help would be greatly appreciated.

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>

popup button html javascript
2 Answers

You could pass popup numbers as params to togglePopup as :

  • more about template strings 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>

user_117375960

A very short and effective solution -

Get all the popups, open buttons and close buttons by class names, loop through them, attach eventlisteners to each of then and you are done!

What it reduces -

  1. No need to have a onclick for each of your open and close buttons.
  2. No need to have special id for each popup, close buttons and open buttons.

This drastically reduces the size of your html.

One more advantage - In future, if you want to add more popups, there is no need to touch the JS, the existing code will handle it.

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>

user_136065090
Related