How to resolve modal window conflict?

Question

css

How to resolve modal window conflict?
created a modal window, attached it to 2 buttons,
then created a 3 button and 2 modal window. For some reason, the last lines conflict, namely, when you click on the area outside the window, it should close, if it works in window 1, then it doesn’t work in window 2 and vice versa.
Here is the code:

(first window, doesn't work here)
window.onclick = function (event) {
if(event.target == modal) {
modal.style.display = "none"; } }

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

Answer 1

Because the second function overwrites the first. If you do it your way, then something like this is correct:

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

 if(event.target == modal2) {
  modal2.style.display = "none"; 
 }
}

And they usually do something like this:

modal1btn.addEventListener(`click`, (e) => {
 e.preventDefault();
 modal1.classList.add(`modal--hidden`);
}

modal2btn.addEventListener(`click`, (e) => {
 e.preventDefault();
 modal2.classList.add(`modal--hidden`);
}