0

сайт на WP, на странице может сгенерироваться несколько секций, и каждая секция будет содержать кнопку которая открывает свой уникальный pop-up с контентом, сейчас при клике на одну кнопку, открываются все pop-up на странице, а нужен только один. Если бы скрипт был на Jquery использовал бы this а как мне быть с данным скриптом?

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
}

1 ответ 1

0

В моём случае, из-за разметки помогло такое решение

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

А modalId и id у pop-up нужно удалить

Ваш ответ

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

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