Asignar Modal a un elemento
De enunpimpam
Asignar un la entrada de un modal al hacer click en un image, aparecera el modal con un overlay en el fondo.
<!-- modal--> <div class="overlay" id="overlay"> </div> <div class="modal" id="modal"> <h1>Título de la foto</h1> <div class="modal-content"> <img src="" alt="" width="170" height="256"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione impedit maiores enim alias ex accusantium quasi cum autem, nam, voluptas tenetur laudantium quod! Odit voluptate illo, voluptas vel quia, quae.</p> </div> <!-- <div class="modal-buttons"> <button class="modal-btn primary" id="cerrar-modal">Cerrar Modal</button> </div> --> </div>
Asignamos las constantes que localizan los objetos modal
y orvelay
const $modal = document.getElementById("modal"); const $overlay = document.getElementById("overlay"); const $cerrarModal = document.getElementById("modal");
Creamos la funciones que muestran y cierran el modal.
function showModal() { $overlay.classList.add("active"); $modal.style.animation = "modalIn .8s forwards"; } $cerrarModal.addEventListener("click", cerrarModal); function cerrarModal() { $overlay.classList.remove("active"); $modal.style.animation = "modalOut .8s forwards"; }
La función de cerrar modal esta dentro del evento addEventListener
cuando detecta el click en elemento $cerrarModal
(modal) se ejecuta.
Para que se muestre el modal creamos una función addEventClick
que le pasamos como parámetro un elemento, esta función se ejecutara cuando se haga click en el elemento, y ejecutara la funciónshowModal
Ahora solo falta llamar a addEventClick
y pasarle el objeto addEventClick(AlbumItems)
function renderAlbumList(lista, $contenedor) { lista.forEach(lista => { // console.log(lista) const HTMLString = FotoItemTemplate(lista); const AlbumItems = CrearPlantilla(HTMLString); $contenedor.append(AlbumItems); addEventClick(AlbumItems); // console.log(HTMLString) // console.log(HTMLString) }); }
Aqui la llamamos dentro de la función RenderAlbumList