Estoy tratando de crear una experiencia interactiva en la que al hacer clic en una imagen de fondo (definida con background-image), esta se abra como una ventana modal, permitiendo una vista más grande y la posibilidad de cerrarla. Sin embargo, hasta el momento, no lo he logrado que esta funcionalidad funcione como espero.
Intentó diversas soluciones, incluido el uso de JavaScript y CSS, pero parece que algo no está en su lugar. ¿Alguien podría proporcionarme orientación sobre cómo lograr este comportamiento deseado?
mi html
<section class="cartas">
<div class="cartas__contenedor">
<div class="cartas__contenedor-imagen cart1">
<button class="cartas__contenedor-botoneliminar" type="button">
<img
class="cartas__contenedor-eliminarimagen"
src="imagenes/borrarfoto.svg"
alt="Eliminar"
/>
</button>
</div>
<div class="tarjetas">
<h2 class="cartas__contenedor-texto">Valle de Yosemite</h2>
<button class="cora" type="button">
<img class="like" src="imagenes/megusta.svg" alt="Me gusta" />
</button>
</div>
</div>
<div class="cartas__contenedor">
<div class="cartas__contenedor-imagen cart2">
<button class="cartas__contenedor-botoneliminar" type="button">
<img
class="cartas__contenedor-eliminarimagen"
src="imagenes/borrarfoto.svg"
alt="Eliminar"
/>
</button>
</div>
<div class="tarjetas">
<h2 class="cartas__contenedor-texto">Lago Louise</h2>
<button class="cora" type="button">
<img class="like" src="imagenes/megusta.svg" alt="Me gusta" />
</button>
</div>
</div>
<div class="cartas__contenedor">
<div class="cartas__contenedor-imagen cart3">
<button class="cartas__contenedor-botoneliminar" type="button">
<img
class="cartas__contenedor-eliminarimagen"
src="imagenes/borrarfoto.svg"
alt="Eliminar"
/>
</button>
</div>
<div class="tarjetas">
<h2 class="cartas__contenedor-texto">Montañas Calvas</h2>
<button class="cora" type="button">
<img class="like" src="imagenes/megusta.svg" alt="Me gusta" />
</button>
</div>
</div>
</section>
<div id="modalimage" class="modalimage">
<span class="cerrar" onclick="cerrarModal()">×</span>
<img id="imagenModal" class="modal-contenido" />
</div>
este es mi html aqui tengo 3 tarjetas que son 3 imagenes tiene un boton de like y otro de borrar pero eso ya lo tengo el problema es que cuando le doy click a la imagen quisiera que se abra como modal(ventana). las iamgenes las agregue en el css
mi CSS
.cart1 {
background-image: url("../imagenes/foto1.jpeg");
}
.cart2 {
background-image: url("../imagenes/foto2.jpeg");
}
.cart3 {
background-image: url("../imagenes/foto3.jpeg");
}
asi ingrese las imagenes en el CSS pero quisiera que cuando yo le de click a la imagen se abra en forma de ventana intentado de todo pero no me resulta aqui mi javascript.
const cartas = document.querySelectorAll(".cart1, .cart2, .cart3");
cartas.forEach(function (carta) {
carta.addEventListener("click", function () {
mostrarModal(carta);
});
});
function mostrarModal(carta) {
// Obtén el modal y la imagen del modal
var modal = document.getElementById("modalimage");
var modalImg = document.getElementById("imagenModal");
// Muestra el modal y establece la imagen del modal
modal.style.display = "block";
modalImg.style.backgroundImage = carta.style.backgroundImage;