Как решить конфликт модальных окон?

Question

[artem]

Как решить конфликт модальных окон?
создал модальное окно, привязал его к 2 кнопкам,
потом создал 3 кнопку и 2 модальное окно. Почему-то конфликтуют последние строки, а именно, при нажатии на область за окном, оно должно закрываться, если в 1 окне это работает, то во 2 нет и наоборот.
Bот код:

(первое окно, тут не работает)
window.onclick = function (event) {
if(event.target == modal) {
modal.style.display = "none"; } }

(второе окно)
window.onclick = function (event) {
if(event.target == modal2) {
modal2.style.display = "none"; } }

Answer 1

[hellcaster]

Потому что вторая функция переписывает первую. Если делать вашим способом, то правильно как-то так:

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

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

А обычно делают как-то так:

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

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

Comments

[artem]

А не подскажите, почему у первого окна z-index: 0; хотя стоит 100, странно, но индекс на нуле, чтобы я не делал.

[hellcaster]

artem, скорее всего, где-то в css напутали