2

primera vez en Stackoverflow, resulta que estoy trabajando en un comparador facial mediante javascript, por lo que necesito que cada cierto tiempo muestre un Popup o un Modal donde se desplegará el validador facial, pero lo que tengo por ahora es que mi Popup solo se despliegue pasados 2 segundos y necesito que despliegue digamos: 2 segundos, después 4 segundos y después 6 segundos, con eso me refiero a cada cierto tiempo, por el momento mi Popup se muestra automático que es algo indispensable, les comparto mi código:

$(document).ready(function() {
  $('.overlay_popup').delay(2000).queue(function() {
    $('.overlay_popup').addClass('popup-open')
  });
});

$.fn.popupClose = function() {
  $(".overlay_popup").removeClass("popup-open");
  return this;
};
.popup {
  padding: 10px;
  min-width: 300px;
  min-height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -150px;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  z-index: -1;
  /* 1px higher than the overlay layer */
  opacity: 0;
}

.overlay_canvas {
  content: "";
  position: fixed;
  /* could also be absolute */
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: 0.5s;
}

.overlay_popup.popup-open .overlay_canvas,
.popup-open .popup {
  opacity: 1;
  z-index: 11
}

.close_btn {
  position: absolute;
  top: 5px;
  right: 10px;
  padding: 10px;
  color: #000;
  outline: none !important;
  text-shadow: none;
  min-width: 1px;
  font-size: 21px;
  color: #8C8C8C;
}

a {
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Popup varias veces</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>

  <span class="overlay_popup">
        <div class="overlay_canvas"></div>
        <div class="popup">
            <a href="#" class="close_btn" onclick="$(this).popupClose();">×</a>
            <h3>Contenido</h3>
            <p>Contenido</p>
        </div>
    </span>
  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
  </script>
  <script src="./script.js"></script>

</body>

</html>

1 respuesta 1

0

No se si entendí bien, si lo que quieres es que se ejecute cada determinado tiempo la misma función entonces necesitas es

setInterval

Lo implementarias así:

$(document).ready(function() {
    setInterval(() => {
    if(!$('.overlay_popup').hasClass('popup-open')){
        $('.overlay_popup').addClass('popup-open');
    }
  },3000);
});

Eso ejecuta la función cada 3 segundos, pero solo se colocará la clase si no la tiene puesta ya.

Lo otro es que si necesitas es que al cerrar el popup se incremente el tiempo de delay entonces lo que tienes que hacer es cada vez que se cierra volver a configurar el delay sumandole el tiempo (nota use en este caso la funcion setTimeout):

var increment = 2000;
var lastTime = 2000;

$(document).ready(function() {
  setPopUpTime(lastTime);
});

$.fn.popupClose = function() {
  $(".overlay_popup").removeClass("popup-open");
  lastTime = lastTime + increment;
  console.log(lastTime);
  setPopUpTime(lastTime);
  return this;
};

function setPopUpTime(time){
    setTimeout(function(){
    $('.overlay_popup').addClass('popup-open');
  },time);
}

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.