-2

Есть динамическое модальное окно. Оно закрывается 3 способами:

  1. Нажатием на крестик
  2. Нажатием на кнопку Esc
  3. Нажатием левой кнопкой мыши вне зоны контента модального окна (Тут ошибка)

Первые два способа работают хорошо, а третий работает и закрывает модальное окно, но, начиная с второго закрытия, в консоли выбивает ошибка:

Uncaught TypeError: Cannot read property 'remove' of null

function renderModal(title, parentSelector) {
  class ModalGG {
    constructor(title) {
      this.title = title;
      this.parent = document.querySelector(parentSelector);
    }
    render() {
      const element = document.createElement('div');
      element.id = 'divInner';

      element.innerHTML = `
                <div class="modal__content__gallery">
                    <div class="modal__close__gallery" id="modal__gallery__close">&times;</div>
                    <div class="modal__title__gallery">${this.title}</div>
                    <div class="wrapper__inner">
                        <div class="modal__gallery__photo">
                            <img src="https://via.placeholder.com/700x700" alt="">
                        </div>
                            <div class="modal__gallery__text">
                                <p>324111121341234</p>
                            </div>
                        </div>
                    </div>
                `;
      this.parent.append(element);
    }
  }
  new ModalGG(title, parentSelector).render();
}

function showModalGallery(title, parentSelector) {

  renderModal(title, parentSelector);
  modalGallery.style.display = 'block';

  //Close code
  var modalGalleryClose = document.querySelector('#modal__gallery__close');
  var divInner = document.querySelector('#divInner');

  // Закрыть крестиком
  modalGalleryClose.addEventListener('click', function(event) {
    event.preventDefault();
    hideModalGallery();
  })

  //Закрыть модальный окно нажатием на кнопку Esc
  document.addEventListener('keydown', function(e) {
    if (e.code === "Escape" && modalDialogGallery.contains(divInner)) {
      e.preventDefault();
      hideModalGallery();
    }
  });

  //закрыть модальный окно нажатием на зону по модульному окном
  modalGallery.addEventListener('click', function(e) {
    if (e.target === modalGallery || e.target.modalGalleryClose == '') {
      hideModalGallery();
    }
  });
}

function hideModalGallery() {
  modalGallery.style.display = 'none';

  var divInner = document.querySelector('#divInner');
  divInner.remove();
}

//Открыть модальное окно
picture.addEventListener('click', function(event) {
  event.preventDefault();

  showModalGallery('title1', ".modal__gallery .modal__dialog__gallery");
});
<div class="modal__gallery" id="modalGallery">
  <div class="modal__dialog__gallery" id="modal__dialog__gallery">
  </div>
</div>
введите сюда описание изображения

1 ответ 1

4

Каждый раз при открытии модалки вы добавляете слушателя на клик

//закрыть модальный окно нажатием на зону по модульному окном
  modalGallery.addEventListener('click', function(e) {
    if (e.target === modalGallery || e.target.modalGalleryClose == '') {
      hideModalGallery();
    }
  });

в итоге при втором закрытии дважды срабатывает hideModalGallery(); при первом запуске он удаляет '#divInner' а при втором возвращает ошибку так как не может удалить его тк его уже нет.

2
  • Спасибо за ответ! Я исправил эту ошибку таким способом: Вынес третий способ за пределы функции showModalGallery ();
    – Max Duma
    28 ноя 2020 в 13:58
  • @MaxDuma Знак "галочка" - слева от ответа.
    – user176262
    29 ноя 2020 в 13:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.