Java Script dual modal unable to close

Question

I have 2 pop-up modals in a webpage which i want to close if the user clicks anywhere outside the modal. The problem is only the 2nd one works 1st doesn't.

// When the user clicks anywhere outside of the modal1, close it
window.onclick = function(event){
if (event.target == modal1) {
    modal1.style.display = "none";
}}

//When the user clicks anywhere outside of the modal2, close it
window.onclick = function(event) {
if (event.target == modal2) {
    modal2.style.display = "none";
}}

score 0 · Answer 1 · answered Feb 11 '17 at 16:26

0

You are overriding the first onclick with the second one.

And just one onclick on the window that checks the modal type and base on that you set it display none.

answered Feb 11 '17 at 16:26

Daniel Mocan

21
2

I know that i am overriding the code. But i have 2 variables modal1 and modal2, how else am i supposed to close both the modals ? Could you provide a code snippet ? – Rishi Kabra Feb 13 '17 at 04:38

Aditya · Accepted Answer · 2017-02-17T05:13:25.993

0

Use the same on-click function for both pop-up modals.

window.onclick = function(event){
if (event.target == modal1)    
{ modal1.style.display = "none"; }
if (event.target == modal2)
{ modal2.style.display = "none"; }
}

edited Feb 17 '17 at 05:13

answered Feb 17 '17 at 04:56

Aditya

110
1
8

score 0 · Answer 3 · answered Feb 17 '17 at 05:02

0

You are overriding the first onclick with the second one.You can do like this;

window.onclick = function(event){
 if (event.target == modal1){modal1.style.display = "none"; } 
 if (event.target == modal2){modal2.style.display = "none";}
}

answered Feb 17 '17 at 05:02

shangzhouwan

246
1
6

Java Script dual modal unable to close

3 Answers3