Asignar Modal a un elemento

De enunpimpam
Revisión del 12:34 11 ago 2020 de Nacho (discusión | contribuciones)
(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)
Saltar a: navegación, buscar

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 addEventClickque 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