Модал не отображается на экране - PullRequest
Новая
       16

Модал не отображается на экране

0 голосов
/ 21 октября 2019

Я пытаюсь создать почти полностраничный модал, управляемый событиями. Я хочу создать модалы для просмотра по клику с тем же CSS, но разными значениями для каждого из 6 разделов, и каждый из них требует много времени и усилий, поэтому я думаю, что должен быть ярлык. Мое динамическое решение не работает, вероятно, из-за циклического перебора .addEventListener(), и я уверен, что там нет typeo. Оконная консоль позволяет мне успешно манипулировать свойством display каждого модального режима с помощью document.querySelectorAll(".modal").forEach((modal) => modal.style.display = "block"), но после document.querySelectorAll(".cols").forEach((col) => col.childNodes[0].style.display = "block") это работает только для 2 из них, даже если все они одинаковы. (index.js) 

    const openModal = (elem) => {
        const col = document.getElementById(elem);
        col.childNodes[0].classList.add(".shown");
    }
    for(let i = 0; i++; i<cols.length) {
        (function() {
            const elem = cols[i].id;
            cols[i].addEventListener("click", openModal(elem), false);
        }());
    };

(index.pug) 

            .cols#communication
                .modal //Content1 
                ...
            .cols#backstory
                .modal //Content2
                ...
            .cols#menu 
                .modal //Content3
                 ...
        .rows 
            .cols#specials
                .modal //Content4
                 ...
            .cols#services
                .modal //Content5
                ...
            .cols#gallery
                .modal //Content6
                ...

(index.scss) 

.rows {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.shown {
    display: block;
    animation-name: modal-fade;
    animation-duration: 1.5s;
}
@keyframes modal-fade {
    from {opacity: .4} 
    to {opacity: 1}
}
@mixin modal {
    display: none;
    position: absolute;
    width: 80vw;
    height: 80vh;
    border: 1px solid rgba(0, 0, 0, 0.8);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    background-color: rgba(0,0,0,0.5);
    @include font(white, $fontSizeM);
}
.modal {
    @include modal;
}
...