i’ve created a sample project with a card slider, inside this slider i’ve created a foreach functions that open a popup when the card is clicked, with some information.
the problem is that i can’t find a way to close popup if i click outside of the popup elements.
here a reproducible example:
https://jsfiddle.net/7hg4y9ro/
my function:
const cards = document.querySelectorAll('.cards')
cards.forEach((card => {
const getName = card.querySelector('.footer-left')
const getPrice = card.querySelector('.footer-right')
function showPopup() {
const el = document.getElementById('cards-container');
const popup = document.createElement('div')
popup.setAttribute('class', 'card-popup')
popup.innerHTML = '' +
'<div class="close-card-popup" id="close-card-popup">×</div>' +
'<p class="card-popup-text">Il prezzo di ' + getName.innerText + ' è di:</p>' +
'<p class="card-popup-price">' + getPrice.innerText + ' €' +
'<div class="card-popup-center"><button class="card-popup-button">Acquista il prodotto</button></div>'
const overlay = document.createElement('div')
overlay.setAttribute('class', 'overlay')
el.appendChild(overlay)
el.appendChild(popup)
}
card.addEventListener('click', showPopup)
}))