Proyecto SuperHeroes LEGO Sin JS

Aunque con Javascript la solución es breve y eficaz. Es bueno saber que existe otra forma de realizar un modal con solo HTML y CSS. Para realizar este tutorial es necesario haber terminado el proyecto completo del curso.

Maquetación HTML

1. Retiramos la clase hidden del modal.
2. Tomamos toda la sección de la clase modal y la metemos dentro de la sección container preferiblemente después del footer.
3. Creamos un input:checkbox que nos permitira abrir y cerrar el modal. Antes del footer dentro de la sección container.

<input type="checkbox" id="spiderman--modal__openclose">

4. A cada botón del footer lo envolvemos con un label que se relacione con nuestro checkbox. Por ejemplo para el botón 1:

        <div id="button-1">
          <label for="spiderman--modal__openclose">
            <img src="https://i.ibb.co/tKWqw8J/spiderman.png" alt="Mocha">
          </label>
        </div>

5. Se habrá deformado un poco la forma de la pagina, pero eso lo arreglaremos luego. Ya con esto podría abrirse el modal.
6. Envolvemos la imagen del icono de cerrar en la sección del modal correspondiente con un label relacionado con el input:checkbox creado.

          <label for="spiderman--modal__openclose">
            <img class="modal-content__close" src="https://img.icons8.com/windows/32/000000/macos-close.png" alt="ícono de cerrar" />
          </label>

Aquí ya hemos asociado el checkbox con nuestro elemento que activa la acción del modal y con el botón de cerrar del modal. Nos queda arreglar los estilos del label de la imagen del footer y el checkbox. Y las acciones con las pseudoclases.

Maquetación CSS

1. Cambiamos el display de la clase modal a none por defecto.

  .modal {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 4;

    display: none;
    place-items: center;
  }

2. Arreglamos el estilo de la imagen.

.footer div label {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
}

3. Ocultamos el checkbox.

#spiderman--modal__openclose {
  display: none;
}

4. Usamos :checked para abrir y cerrar el modal.

#spiderman--modal__openclose:checked ~ .modal {
  display: grid;
}

5. Borramos el código javascript relacionado con la funcionalidad.

Si replicamos este método con cada botón del footer, deberíamos tener el mismo resultado que con el código JS visto en clase.

Espero que les haya sido útil y a seguir practicando!