1

Quiero crear un pop-up para dispositivos móviles, el cual se abre después de una segundos de entrar en la web. Lo he creado en un Block UX de WordPress.

EDITO LA PREGUNTA CON MÁS DETALLES

Con la ayuda de @Cris223511.dev cambia la apariencia y ahora se ve mucho mejor. Pero sigue teniendo el problema que cuanto más grande es el dispositivo, más aumenta el padding superior e inferior. Y cuando añado un Gif en lugar de una imagen, aumenta más el padding.

¿ Como corregir estos errores ?

document.addEventListener("DOMContentLoaded", function () {
      setTimeout(function () {
        document.getElementById("popup").style.display = "block";
      }, 2000);

      document.getElementById("close-btn").addEventListener("click", function () {
        document.getElementById("popup").style.display = "none";
      });
    });
#popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: max-content;
  max-width: 80%;
  max-height: 90%;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  overflow-x: hidden;
}

.popup-text p{
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: rgb(203, 100, 15);
}

.popup-text h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.popup-gif img {
  display: block;
  margin: 0 auto;
  width: 90%;
  height: 300px;
  object-fit: contain;
}

#close-btn {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #26c995;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
<div id="popup">
  <div class="popup-content">
    <div class="popup-gif">
      <img src="galletas-al-horno.gif" alt="GIF animado">
    </div>

    <div class="popup-text">
      <h2>¡Bienvenidos de nuevo!</h2>
      <p> Por fin puede comprar desde la comodidad de su casa</p>

      <p> Podrás disfrutar de precios exclusivos que no encontrarás en ningún otro lugar. ¡Bienvenido a una nueva
        forma de comprar en linea!</p>
    </div>

    <button id="close-btn">Cerrar</button>
  </div>
</div>

5
  • 1
    Yo veo todo el contenido centrado... menos el h2... que bastaría con ponerle un text-align: center... codepen.io/christopher-ps/pen/qBJpBdw Commented el 4 may. 2023 a las 16:18
  • Disculpa la demora en responder @Cris223511.dev , Hice pruebas, pero en dispositivos móviles se sale el texto por los lados. He buscado la forma de añadir media Query pero no encuentro el punto.
    – Diana
    Commented el 4 may. 2023 a las 22:57
  • 1
    Actualicé el enlace, ¿Es eso lo que necesita?... Más luego explico los cambios que hice. Commented el 4 may. 2023 a las 23:15
  • Gracias @Cris223511.dev , ahora funciona mejor . Estoy tratando de corregir otro error que se genera al añadir un Gif, en lugar de una imagen, me crea mucho padding y tambien rompe el diseño. Pero con una imagen, queda perfecto. Voy a tratar de corregir el problema de padding y siéntete libre de añadir una respuesta
    – Diana
    Commented el 5 may. 2023 a las 7:43
  • He descubierto, que a medida que hacemos el dispositivo más pequeño, aumenta el padding superior e inferior en la imagen, he cambiado el código de la pregunta añadiendo el tuyo
    – Diana
    Commented el 5 may. 2023 a las 10:52

2 respuestas 2

1

El padding en tu GIF o imagen ocurre porque la altura de img es fija, por lo que mientras vamos reduciendo o aumentando la pantalla, la altura se permanece, dejando un espacio y haciendo que los elementos de debajo se permanezcan en su lugar, y así el popup-content se aumenta en el lado superior e inferior.

Solamente quitemos el alto fijo que tiene la imagen:

.popup-gif img {
  display: block;
  margin: 0 auto;
  width: 90%;
  /* height: 300px; */
  object-fit: contain;
}

Demo:

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    document.getElementById("popup").style.display = "block";
  }, 2000);

  document.getElementById("close-btn").addEventListener("click", function () {
    document.getElementById("popup").style.display = "none";
  });
});
#popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: max-content;
  max-width: 80%;
  max-height: 90%;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  overflow-x: hidden;
  clip-path: inset(0% 0% round 25px);
}

.popup-text p{
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: rgb(203, 100, 15);
}

.popup-text h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.popup-gif img {
  display: block;
  margin: 0 auto;
  width: 90%;
  object-fit: contain;
}

#close-btn {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #26c995;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
<div id="popup">
  <div class="popup-content">
    <div class="popup-gif">
      <img src="https://i.imgur.com/wBWzOZo.png" alt="GIF animado">
    </div>

    <div class="popup-text">
      <h2>¡Bienvenidos de nuevo!</h2>
      <p> Por fin puede comprar desde la comodidad de su casa</p>

      <p> Podrás disfrutar de precios exclusivos que no encontrarás en ningún otro lugar. ¡Bienvenido a una nueva
        forma de comprar en linea!</p>
    </div>

    <button id="close-btn">Cerrar</button>
  </div>
</div>

0
1

Es que en tu CSS, tienes el display del popup como fixed y con eso no se puede mover del casi todo... yo usaría flex y pondría todo centrado... sería algo como así.

#popup {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.popup-content {
  text-align: center;
}
<div id="popup">
    <div class="popup-content">
      <div class="popup-gif">
        <img src="galletas-al-horno.gif" alt="GIF animado">
      </div>

      <div class="popup-text">
        <h2>¡Bienvenidos de nuevo!</h2>
        <p> Por fin puede comprar desde la comodidad de su casa</p>

        <p> Podrás disfrutar de precios exclusivos que no encontrarás en ningún otro lugar. ¡Bienvenido a una nueva
          forma de comprar en linea!</p>
      </div>

      <button id="close-btn">Cerrar</button>
    </div>
  </div>

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.