He creado un proyecto de muestra con un control deslizante de tarjeta, dentro de este control deslizante he creado funciones foreach que abren una ventana emergente cuando se hace clic en la tarjeta, con cierta información.
el problema es que no puedo encontrar una manera de cerrar la ventana emergente si hago clic fuera de los elementos emergentes.
aquí un ejemplo reproducible: https://jsfiddle.net/7hg4y9ro/
mi función:
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) }))Simplemente agregue al final de su función showPopup() este código:
function closePopup(){ popup.remove() overlay.remove() } overlay.addEventListener('click', closePopup) var elem = document.querySelector('.close-card-popup') elem.addEventListener('click', closePopup)Dado que está creando elementos, puede eliminarlos. Como esto:
function hidePopup() { document.querySelector('.card-popup').remove() document.querySelector('.overlay').remove() } 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) document.querySelector('.close-card-popup').addEventListener('click', hidePopup) document.querySelector('.overlay').addEventListener('click', hidePopup) }Pero lo haría con CSS en lugar de JS usando la pseudo clase :target.