No soy un desarrollador experto, pero necesito mostrar una ventana emergente a pantalla completa después de 2 minutos de inactividad. ¿Alguien puede ayudarme con JavaScript?
Pongo un código de ejemplo a continuación
¿Qué propiedad CSS debo darle al div? ¿Cómo puedo conectarme con JavaScript?
Gracias
<div class="my-popup"> <p>Some example text</p> </div> <style> .my-popup{ width:100%; height:100vh; background-color:orange; } </style>Puedes probar algo como esto para lograrlo. Inicie un temporizador (en el ejemplo a continuación es de 5 segundos) y si ocurre algún evento de usuario (por ejemplo, onmousemove , onkeypress , etc.) antes de estos 5 segundos, reinicie el temporizador nuevamente. Si no se activa ningún evento, muestre la ventana emergente después de 5 segundos actualizando la propiedad de display usando JS.
Fragmento de código de trabajo completo:
let inactivityTime = function() { let time; window.onload = resetTimer; document.onmousemove = resetTimer; document.onkeypress = resetTimer; function showPopup() { document.getElementById('my-popup').style.display = 'block'; } function resetTimer() { document.getElementById('my-popup').style.display = 'none'; clearTimeout(time); time = setTimeout(showPopup, 5000) } }; inactivityTime(); #my-popup { position: absolute; left: 0; right: 0; font-weight: bold; text-align: center; margin-left: auto; margin-right: auto; display: none; z-index: 9; width: 70vh; height: 50vh; background-color: orange; border-radius: 5px; box-shadow: 5px 5px 5px #fcb603; } <div id="my-popup"> <p>You were inactive for 5 seconds</p> </div>Depende de que tipo de actividad estes hablando..
Podría ser desplazamiento, clic, movimientos del ratón... o incluso todo
Para capturar eso, necesitará tener un oyente en estos eventos y después de un cierto tiempo de que los eventos no sucedan, mostrará la alerta.
Aquí he usado jquery para acceder a los elementos.
$(function(){ function showpopup(time){ $('.my-popup').addClass('show') $('.my-popup').children('p').html(`Inactivity for ${time}`) $('#display').html(`Inactivity: Popup Triggered`) return false } activity_status = false // Create variable to hold current activity // false for no activity and true for activity happening $(window).on('mousemove click scroll', function(){ $('#display').html(`Activity happening, so no popup`) // for any of these events, update the activity status activity_status = true // then when the user begins activity again, close the popup $('.my-popup').removeClass('show') }) setInterval(() => { // if the activity is false after every 5 seconds, show the modal // if not, then set the activity_status to false again and begin checking again activity_status = !activity_status ? showpopup('4 seconds') : false }, 4000) }) .my-popup { display: none; width: 100%; height:100vh; background-color:orange; align-items: center; justify-content: center; } .show { display: flex; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p id="display"></p> <div class="my-popup"> <p></p> </div>