CODEWITHSUNDEEP
javascripthtmlpopup
Jake Howard
Jake Howard

Reputation: 1

Multiple Pop Ups But Only One Works... Why?

I'm struggling with this code and I think its a lack of understanding of js. When I attempt to replicate the code to make multiple buttons only the last one works correctly (the one with the highest numerical value). I attempted this way because all of the behaviors are done in ID tags so they are to be unique a bit of a work around I know... but i am still learning this. I'm not sure what is causing my troubles but I'm hoping you can help. Thank you for your time in advance

HTML

<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
  Popup contents here
 <button id="CloseBtn">ClosePopup</button>
</div>
<div>
some other content that will be behind the popup
</div>

<button id="LearnMoreBtn2">Learn More2</button>
<div id="overlay2"></div>
<div id="popup2">
 Popup contents here2
 <button id="CloseBtn2">ClosePopup2</button>
</div>
<div>
 some other content that will be behind the popup2
</div>

CSS

#overlay {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 99999;
}

#popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin-top: -75px;
margin-left: -150px;
background: #FFFFFF;
border: 2px solid #000;
z-index: 100000;
}

#overlay2 {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 99999;
}

#popup2 {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin-top: -75px;
margin-left: -150px;
background: #FFFFFF;
border: 2px solid #000;
z-index: 100000;
}

JS

window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");
    overlay.style.display = "block";
    popup.style.display = "block";
 };

document.getElementById("CloseBtn").onclick = function(){
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");
    overlay.style.display = "none";
    popup.style.display = "none";      
    }
    };

window.onload = function() {
document.getElementById("LearnMoreBtn2").onclick = function(){
    var overlay = document.getElementById("overlay2");
    var popup = document.getElementById("popup2");
    overlay.style.display = "block";
    popup.style.display = "block";
    };

document.getElementById("CloseBtn2").onclick = function(){
    var overlay = document.getElementById("overlay2");
    var popup = document.getElementById("popup2");
    overlay.style.display = "none";
    popup.style.display = "none";      
    }
    };

Upvotes: 0

Views: 39

Answers (3)

user6124142
user6124142

Reputation:

You are using window.onload = function() {} twice. Merge those 2 window.onload and use it just once.

Your final code should look like this

window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};

document.getElementById("CloseBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";      
}

document.getElementById("LearnMoreBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "block";
popup.style.display = "block";
};

document.getElementById("CloseBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "none";
popup.style.display = "none";      
}
};

Upvotes: 1

Munawir
Munawir

Reputation: 3356

Remove second occurance of window.onload = function() {.

window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");
    overlay.style.display = "block";
    popup.style.display = "block";
 };

document.getElementById("CloseBtn").onclick = function(){
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");
    overlay.style.display = "none";
    popup.style.display = "none";      
    };


document.getElementById("LearnMoreBtn2").onclick = function(){
    var overlay = document.getElementById("overlay2");
    var popup = document.getElementById("popup2");
    overlay.style.display = "block";
    popup.style.display = "block";
    };

document.getElementById("CloseBtn2").onclick = function(){
    var overlay = document.getElementById("overlay2");
    var popup = document.getElementById("popup2");
    overlay.style.display = "none";
    popup.style.display = "none";      
    }
    };
#overlay {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 99999;
}

#popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin-top: -75px;
margin-left: -150px;
background: #FFFFFF;
border: 2px solid #000;
z-index: 100000;
}

#overlay2 {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 99999;
}

#popup2 {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin-top: -75px;
margin-left: -150px;
background: #FFFFFF;
border: 2px solid #000;
z-index: 100000;
}
<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
  Popup contents here
 <button id="CloseBtn">ClosePopup</button>
</div>
<div>
some other content that will be behind the popup
</div>

<button id="LearnMoreBtn2">Learn More2</button>
<div id="overlay2"></div>
<div id="popup2">
 Popup contents here2
 <button id="CloseBtn2">ClosePopup2</button>
</div>
<div>
 some other content that will be behind the popup2
</div>

Upvotes: 0

Inpyo Jeon
Inpyo Jeon

Reputation: 220

Try merge those 2 window.onload and use it just once.

window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};

document.getElementById("CloseBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";      
}

document.getElementById("LearnMoreBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "block";
popup.style.display = "block";
};

document.getElementById("CloseBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "none";
popup.style.display = "none";      
}
};

Upvotes: 0

Related Questions