1

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()">&times;</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;
1

2 respuestas 2

0

Al parecer la propiedad backgroundImage no te esta llegando a traves de element.style, prueba usando getComputedStyle() que devuelve los estilos finales computados del elemento pasado por parámetros.

Aunque style y getComputedStyle() parezcan lo mismo, el primero se usa para modificar los estilos y el segundo es de solo lectura y debería usarse para obtener estilos de cierto elemento de forma fiable:

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";
  let url = getComputedStyle(carta).backgroundImage
  modalImg.style.backgroundImage = url;
}
0
const like = document.querySelectorAll(".like");

like.forEach(function (button) {
  button.addEventListener("click", function () {

if (button.classList.contains("dislike")) {
  button.classList.remove("dislike");
} else {
  button.classList.add("dislike");
}
  });
});

ahi me funciono

1
  • 2
    Pulsa en editar y describe cómo este código responde a la pregunta. Puede que entiendas qué hace, pero otros usuarios que podrían llegar a tener un problema similar, puede que no.
    – padaleiana
    Commented el 9 oct. 2023 a las 12:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.