Как дописать скрипт, чтобы на странице открывалось только одно pop-up окно?

Question

[Дмитрий Медведкин]

Здравствуйте, я нашел хороший скрипт для работы модального окна, но не могу понять как его улучшить. Для примера, у меня на странице динамически создаются секции, в которой есть кнопка и соответственно модалка с уникальным контентом секции. Сейчас по нажатию на кнопку в любой секции открываются все модалки на странице, а надо только ту, которая находится внутри секции где оно расположено, пробовал использовать this, но видимо я делал что-то не так

<section class="section">
        <a href="#district__card-overley" class="title-link-district js-pop-up-open">
            <span>&#8594</span>
        </a>
        <div class="district__card-overley" id="district__card-overley">
            <div class="district__card">
                <div class="district__card-header">
                    <button class="district__card--close js-pop-up-close"><span>&times;</span></button>
                    <h4 class="district__card-title">
                        микрорайон<br>Новый
                    </h4>
                </div>
            </div>
        </div>
    </section>

// Pop-up open

const CLASS_LIST = {
	MODAL: 'district__card-overley',
	MODAL_ACTIVE: 'district__card-active',
	BODY_LOCK: 'lock',
	MODAL_HAS_SCROLL: 'pop-up-has-scroll',
	TRIGGER_OPEN: 'js-pop-up-open',
	TRIGGER_CLOSE: 'js-pop-up-close'
};

const showScroll = (event) => {
	if (event.propertyName === 'transform') {
		
		document.body.style.paddingRight = '';
		document.body.style.overflow = 'visible';
		document.body.style.overflowX = 'hidden';

		event.target.closest(`.${CLASS_LIST.MODAL}`).removeEventListener('transitionend', showScroll);
	}
};

document.addEventListener('click' , (event) => {
	//open
	if (event.target.closest(`.${CLASS_LIST.TRIGGER_OPEN}`)) {
		event.preventDefault();

		const target = event.target.closest(`.${CLASS_LIST.TRIGGER_OPEN}`);
		const modalId = target.getAttribute('href').replace('#' , '');
		const modal = document.getElementById(modalId);

		document.body.style.paddingRight = `${getScrollbarWidth()}px`;
		document.body.style.overflow = "hidden";

		modal.classList.add(CLASS_LIST.MODAL_ACTIVE);
	}
	//close
	if (event.target.closest(`.${CLASS_LIST.TRIGGER_CLOSE}`) || event.target.classList.contains(CLASS_LIST.MODAL_ACTIVE)) {
		event.preventDefault();

		const modal = event.target.closest(`.${CLASS_LIST.MODAL}`);

		modal.classList.remove(CLASS_LIST.MODAL_ACTIVE);

		modal.addEventListener('transitionend' , showScroll)
	}
})

const getScrollbarWidth = () => {
	const item = document.createElement('div');

	item.style.position = 'absolute';
	item.style.top = '-9999px';
	item.style.width = '50px';
	item.style.height = '50px';
	item.style.overflow = 'scroll';
	item.style.visibility = 'hidden';


	document.body.appendChild(item);
	const scrollBarWidth = item.offsetWidth - item.clientWidth;
	document.body.removeChild(item);

	return scrollBarWidth
}

Comments

[Вадим]

А айдишники у модалок разные в разных секциях?

Вот тут Ваш скрипт находит элемент модалки по id, исходя из того, что написано в атрибуте href у ссылки

const target = event.target.closest(`.${CLASS_LIST.TRIGGER_OPEN}`);
const modalId = target.getAttribute('href').replace('#' , ''); // смотрит на значение href, вырезает решётку.
const modal = document.getElementById(modalId); // находит элемент с таким id

И точно ли у Вас открываются все модалки сразу? Тут один элемент только ищется.

[Дмитрий Медведкин]

Вадим, нет эти секции создаются динамически, т.е сегодня этих секций 3, а завтра уже 5, потому что админ добавил 2 новых микрорайона например (сайт на WP), в этом и загвостка, получается на странице несколько pop-up с одинаковым id (т.к. верстка секции находится в цикле)

[Вадим]

Дмитрий Медведкин, ну тогда удалить вообще id у этих элементов, раз он не уникальный. А решение в ответы сейчас напишу

Answer 1

[Вадим]

Тут всё зависит от разметки, но если она всегда такая, как Вы указали, то можно сделать так:

const target = event.target.closest(`.${CLASS_LIST.TRIGGER_OPEN}`);
const modal = target.nextElementSibling

Такой подход будет работать если кнопка-активатор модалки (элемент с классом CLASS_LIST.TRIGGER_OPEN) и сама модалка идут в разметке строго друг за другом.

Comments

[Дмитрий Медведкин]

Да разметка будет такая, сначала кнопка, потом модалка. Попробовал ваше решение, ошибка
Uncaught TypeError: target.nextElementSibling is not a function at HTMLDocument

[Вадим]

Дмитрий Медведкин, обновил ответ, попробуйте ещё раз, так как это действительно не функция, а свойство.

[Вадим]

Дмитрий Медведкин, Возможно стоит ещё сделать проверку что target не Null

[Дмитрий Медведкин]

Вадим спасибо, разобрался