@sneeeg

Как заполнить модальное окно?

Как заполнять модальное окно. Например имеется несколько карточек. Которые содержат в себе название и описание.
5ff85a1657420487770782.png
<div class="block">
        <h1 class="title">
            Title Card
        </h1>
        <p class="subtitle">
            Subtitle
        </p>
    </div>


Как при клике открывать модальное окно, и заполнять его содержимое - содержимым кликаемой карточки. Модальное окно сделал, осталось только правильно его заполнить
let block = document.getElementsByClassName('block')
let modal_content = document.getElementsByClassName('modal_content')
let modal = document.getElementById('modal')

function closeModal() {
    modal.addEventListener('click', function () {
        this.classList.remove('modal_active')
    })
}

function openModal() {
    for(let i=0; i<block.length; i++){
        block[i].addEventListener('click', function () {
            console.log(this.childNodes[1])
            modal.classList.add('modal_active')
            modal_content.innerHTML = this.childNodes[1]
        })
    }
}


И как можно упростить/сократить цикл for()
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 1
@fertyga098
Как варинат можно при сделать одну функцию (открывание модалки) где будет передоваться id модалки.
После вы берете нужные данные откудота (например API) и дальше вставляете нужную вам инфу в модалку.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы