Как исправить ошибку?

Question

[kingmass]

Всем привет! Хочу сделать на сайте модальное окно, нашёл решение https://codepen.io/mlnoz/pen/ExNeJrx, на локалке работает, но когда скрипт подключаю к сайту то появляется ошибка: "Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLDocument. (modal.js?v=10932257606677173997:62)" .

Сайт работает на Shopify. Подскажите пожалуйста, как это решается.

Answer 1

[Радость моя]

62я строка это

overlay.addEventListener('click', function () {
        document.querySelector('.modal.active').classList.remove('active');
        this.classList.remove('active');
    });

смотрим что такое overlay? (9я строка)

overlay = document.querySelector('.js-overlay-modal'),

но класса js-overlay-modal я не вижу в html разметке.

поэтому и ошибка. попытка привязать слушатель событий к несуществующему объекту.

Скорее всего вы в разметке забыли добавить div с оверлеем

Comments

[kingmass]

Да, всё верно! Добавил к коду <div class="overlay js-overlay-modal"></div>. Спасибо! Скрипт теперь не выдаёт ошибку, но и не запускает само модальное окно, а только подложку.

[Радость моя]

kingmass, я тоже добавил в codepen то что вы указали самой первой строчкой. все работает. возможно что-то в shopify перекрывает модалку (z-index) раз оверлей показывается.