How to show a fullscreen box popup after 2 mins of inactivity-CodePudding

Hi I'm not an expert developer, but I need to show a fullscreen popup after 2 mins of inactivity. Someone can help me with javascript?

I put some example code below

Wich css property I must give to the div? How can I connect with the javascript?

Thanks

<div >
  <p>Some example text</p>
</div>

<style>
.my-popup{
  width:100%;
  height:100vh;
  background-color:orange;
}
</style>

CodePudding user response：

You can try something like this to achieve it. Start a timer (in below example it's for 5 secs) and if any user event occur (eg. onmousemove, onkeypress etc.) before these 5 secs, reset the timer again. If no event gets triggered, show the popup after 5 secs by updating the display property using JS.

Full working code snippet:

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>

CodePudding user response：

Depends on what kind of activity you're talking about..

It could be scrolling, clicking, mouse movements .. or even all

To capture that you're gonna need to have a listener on these events and after a certain time of the events not happening, you display the alert..

Here I've used jquery to access the elements

$(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 >
  <p></p>
</div>