window.onclick = function(event) only works for first item

Here is a jsfiddle of my complete code, where you can test the functionality of the two modals. Clicking outside the second modal closes it, while clicking outside the first modal does not close it.

I have two modal pop-up windows on an HTML page, and after they're opened, they can be closed by clicking outside of the modal with this code:

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

For some reason, this code only works for the second (last) instance of it in my script.js file. You can see that there are really just two blocks of code in this file: the first controls the first modal, and the second controls the second modal. Each instance of the code above is at the end of the block.

// Get modalCompanies var modalCompanies = document.getElementById('companiesModal'); // Get button that opens the modalCompanies var btnCompanies = document.getElementById("companiesOpen"); // Get <spanCompanies> element that closes the modalCompanies var spanCompanies = document.getElementsByClassName("close")[0]; // When user clicks on the button, open the modalCompanies btnCompanies.onclick = function() { modalCompanies.style.display = "block"; } // When user clicks on <spanCompanies> (x), close modalCompanies spanCompanies.onclick = function() { modalCompanies.style.display = "none"; } // When user clicks anywhere outside of the modalCompanies, close it window.onclick = function(event) { if (event.target == modalCompanies) { modalCompanies.style.display = "none"; } } // Get modalPrivacy var modalPrivacy = document.getElementById('privacyModal'); // Get button that opens the modalPrivacy var btnPrivacy = document.getElementById("privacyOpen"); // Get <spanPrivacy> element that closes the modalPrivacy var spanPrivacy = document.getElementsByClassName("close")[1]; // When user clicks on the button, open the modalPrivacy btnPrivacy.onclick = function() { modalPrivacy.style.display = "block"; } // When user clicks on <spanPrivacy> (x), close modalPrivacy spanPrivacy.onclick = function() { modalPrivacy.style.display = "none"; } // When user clicks anywhere outside of the modalPrivacy, close it window.onclick = function(event) { if (event.target == modalPrivacy) { modalPrivacy.style.display = "none"; } } 

What is preventing the window.onclick = function(event) { } function at the end of each block from being functional in both blocks?

4 Answers

use

window.addEventListener("click", function(event) { }); 

instead of

window.onclick = function() { } 

second 'onclick' event rewrite the first one. use element.addEventListener()

see more

Your second window.onclik overriding the first one, you could just combine both and use logic to hide different modals.

// Get modalCompanies var modalCompanies = document.getElementById('companiesModal'); // Get button that opens the modalCompanies var btnCompanies = document.getElementById("companiesOpen"); // Get <spanCompanies> element that closes the modalCompanies var spanCompanies = document.getElementsByClassName("close")[0]; // When user clicks on the button, open the modalCompanies btnCompanies.onclick = function() { modalCompanies.style.display = "block"; } // When user clicks on <spanCompanies> (x), close modalCompanies spanCompanies.onclick = function() { modalCompanies.style.display = "none"; } // Get modalPrivacy var modalPrivacy = document.getElementById('privacyModal'); // Get button that opens the modalPrivacy var btnPrivacy = document.getElementById("privacyOpen"); // Get <spanPrivacy> element that closes the modalPrivacy var spanPrivacy = document.getElementsByClassName("close")[1]; // When user clicks on the button, open the modalPrivacy btnPrivacy.onclick = function() { modalPrivacy.style.display = "block"; } // When user clicks on <spanPrivacy> (x), close modalPrivacy spanPrivacy.onclick = function() { modalPrivacy.style.display = "none"; } // When user clicks anywhere outside of the modalPrivacy, close it window.onclick = function(event) { if (event.target == modalPrivacy) { modalPrivacy.style.display = "none"; } if (event.target == modalCompanies) { modalCompanies.style.display = "none"; } }

/*modal background*/ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /*modal box*/ .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 5px solid #f9cdcd; width: 80%; /* Could be more or less, depending on screen size */ } .modal-content p{ font-family: 'Open Sans', sans-serif; font-size: 14px; } /*close button*/ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }

 <span>click companies</span> <!--companies modal--> <div> <!--modal--> <div> <span>&times;</span> <p>test 1</p> </div> </div> <span>click privacy</span> <!--privacy modal--> <div> <!--modal--> <div> <span>&times;</span> <p>test</p> </div> </div>

You defined window.onclick twice in the script, so the first one is overwritted by the later one. Try to move the two actions into one window.onclick, like this:

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