How can I launch a modal in the form of an alert in JavaScript that is activated and deactivated automatically at a certain time?
when activated, please some documentation, suggestion or help. Thanks.
Thanks in advance to the answers already received.
If you want it to be active for example between 10 am and 05:59 pm you can evaluate the current time and from there decide if to hide or show an element:
var fecha = new Date();
var hora = fecha.getHours();
if (hora > 9 && hora < 18) { // Aqui puedes checkear minutos, segundos y combinar criterios lógicos
document.getElementById("miModal").style.display = "block";
} else {
document.getElementById("miModal").style.display = "none";
}
Assuming you have an element that has an id="myModal" that element will appear between the indicated times.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="miModal" style="display: block;">
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</div>
<script>
var fecha = new Date();
var hora = fecha.getHours();
alert(hora);
if (hora > 9 && hora < 18) { // Aqui puedes checkear minutos, segundos y combinar criterios lógicos
document.getElementById("miModal").style.display = "none";
} else {
document.getElementById("miModal").style.display = "block";
}
</script>
</body>
</html>
You can use the setTimeout and setInterval , these functions are what you do is execute the code you need when you have passed at least the time interval that you indicate as parameter.
setTimeout(() => {
console.log('Hola luego de 3 segundos');
}, 3000);The difference between these two functions is that the first one runs once and the other repeatedly each time interval.
There are also two other functions that are the counterpart, serve to cancel the execution of these clearTimeout and clearInterval and are used like this:
var i = 0;
var intervalId = setInterval(() => { console.log('Hola ${i++}'); }, 1000);
document.getElementById('boton')
.addEventListener('click', (e) => {
clearInterval(intervalId);
console.log('detenido');
});<button id="boton">Detener</button>