Как сделать закрытие модального окна?

Question

[Дмитрий Самойлов]

Привет, сделал открытие 2 модальных окон в 1 функции, каждое окно привязано к своей кнопке, раньше у меня было одно и работало нормально, но я в функцию добавил второе и теперь не работает закрытие на крестик, функция почему то перестала работать

const modal = document.querySelector(".popup");   /* 1 окно*/
const trigger = document.querySelector(".user-info__button");  /* кнопка открытия 1 окна */
const closeButton = document.querySelector(".popup__close");  /* кнопка закрытия */
const modalProfile = document.querySelector('.popup_profile');  /* 2 окно*/
const profile = document.querySelector(".user-info__edit_button"); /* кнопка открытия 2 окна */
/* Открытие модального окна */
function toggleModal(event) {
   
  if (event.target.matches('.user-info__button')) {
    modal.classList.toggle("popup_is-opened");
  }
 else if (event.target.matches('.user-info__edit_button')) {
   modalProfile.classList.add('popup_is-opened');
 }
 
}


profile.addEventListener("click", toggleModal);
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);

Answer 1

[Yana Tomkovich]

Раз у тебя стало две кнопки, которые должны закрывать, то нужно применять document.querySelectorAll вместо document.querySelector
Вот одно из решений

const modal = document.querySelector(".popup");   /* 1 окно*/
const trigger = document.querySelector(".user-info__button");  /* кнопка открытия 1 окна */
const closeButton = document.querySelectorAll(".popup__close");  /* кнопка закрытия */
const modalProfile = document.querySelector('.popup_profile');  /* 2 окно*/
const profile = document.querySelector(".user-info__edit_button"); /* кнопка открытия 2 окна */
/* Открытие модального окна */
function toggleModal(event) {

	if (event.target.matches('.user-info__button')) {
		modal.classList.add("popup_is-opened");
	} else if(event.target.matches(".user-info__edit_button")) {
		modalProfile.classList.add('popup_is-opened');
	} 
	else if (event.target.matches('.popup .popup__close')) {
		modal.classList.remove("popup_is-opened");
	} else if (event.target.matches('.popup_profile .popup__close')) {
		modalProfile.classList.remove('popup_is-opened');
	}
}


profile.addEventListener("click", toggleModal);
trigger.addEventListener("click", toggleModal);
closeButton.forEach(btn => btn.addEventListener("click", toggleModal));

Comments

[Дмитрий Самойлов]

немного не то, кажется. Закрытие привязано к одной кнопке, а вызываю двумя разными, окна можно открыть, но не закрываются

[Yana Tomkovich]

Дмитрий Самойлов, добавьте html-разметку