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

Question

[sneeeg]

Как заполнять модальное окно. Например имеется несколько карточек. Которые содержат в себе название и описание.

<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()

Answer 1

[Artem Nanavov]

Как варинат можно при сделать одну функцию (открывание модалки) где будет передоваться id модалки.
После вы берете нужные данные откудота (например API) и дальше вставляете нужную вам инфу в модалку.