Проблема с кодированием модального окна, которое отображается при нажатии на определенный элемент div [дубликат] ⇐ Javascript

[Anonymous]

Я знаю, как сделать так, чтобы модальное окно появлялось при нажатии, но по некоторым причинам я, похоже, не могу понять, как включить это в уже установленные функции.
по сути, у меня есть две функции: одна для отображения карточек (то есть продуктов) с данными из json и одна для модальных окон. Я пробовал несколько подходов, чтобы изменить отображение модальных окон с «нет» на «блокировать», но каждый раз у меня возникает одна и та же проблема:
'Uncaught TypeError: невозможно прочитать свойства undefine (чтение «style»)'
(или вообще нет результатов)
мой вызов выборки в журнале консоли:
Array(6)
0
:
{id: 1, name: 'Poster for Karaoke-Night', img: 'https://files.catbox.moe/orkj1p.png', full: 'Ut enim ad minima veniam, quis nostrum exercitatio…ui dolorem eum fugiat quo voluptas nulla pariatur'}
1
:
{id: 2, name: 'b', img: 'https://files.catbox.moe/lyhv18.png', full: 'Ut enim ad minima veniam, quis nostrum exercitatio…ui dolorem eum fugiat quo voluptas nulla pariatur'}
2
:
{id: 3, name: 'c', img: 'https://files.catbox.moe/822k40.png', full: 'Ut enim ad minima veniam, quis nostrum exercitatio…ui dolorem eum fugiat quo voluptas nulla pariatur'}
3
:
{id: 4, name: 'd', img: 'https://files.catbox.moe/ge7bqz.png', full: 'Ut enim ad minima veniam, quis nostrum exercitatio…ui dolorem eum fugiat quo voluptas nulla pariatur'}
4
:
{id: 5, name: 'e', img: 'https://files.catbox.moe/u3a4mk.png', full: 'Ut enim ad minima veniam, quis nostrum exercitatio…ui dolorem eum fugiat quo voluptas nulla pariatur'}
5
:
{id: 6, name: 'f', img: 'https://files.catbox.moe/ef8e55.png'}
length
:
6

Вот мой код (с моей последней попытки) и заранее спасибо!
function illuItems() {
fetch('../elements/json/illu.json', {
method: 'GET',
headers: {
'content-type': 'application/json'
}
})
.then((response) => response.json())
.then((data) => {
illuCard(data)
createModal(data)
})
}
illuItems()

function illuCard(data) {
console.log(data)
data.forEach(elements => {
const displayCard = document.getElementById('illuCard')
displayCard.innerHTML += `

${elements.name}

`
})
}

function createModal(data) {
data.forEach(elements => {
const displayModal = document.getElementById('modal')
displayModal.innerHTML += `




${elements.name}
${elements.full}


`
})
}

modal = document.getElementsByClassName('modalClass');
document.querySelectorAll('.carte').forEach(item => {
item.addEventListener('click', event => {
modal[0].style.display = 'block';
} )
})

window.addEventListener('mouseup', function (event){
var box = this.document.getElementById('modal');
if(!box.contains(event.target)){
modal[0].style.display = 'none';
}
})

//html










Bunf's Portfolio


.album {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}

#illuCard {
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}

.carte {
width: 350px;
height: 230px;
background-size: cover;
background-position: center;
}

.carteTitle {
display: none;
}

/* item on click */

#modal {
position: absolute;
display: none;
}

.modalClass {
width: 100%;
background-color: rgba(0, 0, 0, 0.445);
display: flex;
flex-direction: column;
align-items: center;
}

.popup {
width: 800px;
display: flex;
background-color: rgba(64, 64, 64, 0.628);
color: aliceblue;
box-shadow: 1px 0px 6px 5px rgba(0, 0, 0, 0.2);
justify-content: space-between;
}

.popupImg {
height: 100%;
background-size: contain;
display: flex;
align-items: center;
justify-content: center;
}

.popupImg img {
width: 100%;
height: 100%;
object-fit: contain;
}

.desc {
display: flex;
flex-direction: column;
margin: 10px;
font-size: 15px;
gap: 20px;
}

.full {
font-family: 'Lufga';
}








Illustrations




Contact








Подробнее здесь: https://stackoverflow.com/questions/798 ... is-clicked