Show Modal after user hasnt interact with the page in x minutes

Question

I was wondering if there is reasonable simple method of showing a modal after some time when a page isnt being showed to the user. So i have a page, i dont close it but i go to another one, as soon as that happen a time starts, if i dont come back to the page in lets say less than 5 min, a modal is displayed telling me "ive been away for so long and that i should refresh it" so when i come back to that page i see that modal.

Obviusly im only "requesting" the time code, got the modal already, here it is:

    <div style="padding: 20px;"id="id01" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-4">
            <header class="w3-container w3-teal"> 
                <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
            </header>
            <div style="width: 100%" class="w3-container">
                <p id="captcha_advertencia">¡Vaya!</p>
                <img src="imagenes/captchaIncorrecto.jpeg" />
                <p>Los valores que has introducido no se corresponden con el captcha</p>
                <p>Por favor introduce correctamente los caracteres de la imagen</p>
            </div>
        </div>
    </div>

Thanks for your time

https://stackoverflow.com/questions/7389328/detect-if-browser-tab-has-focus, https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API — CBroe, Feb 27 '18 at 09:43
Timeouts etc. might get suspended though when the tab is not “active”, so instead of using those, I’d rather compare the current timestamp to the one stored when the tab becoming “inactive” was detected, when the user returns to it. — CBroe, Feb 27 '18 at 09:44
check this might help https://stackoverflow.com/questions/13246378/detecting-user-inactivity-over-a-browser-purely-through-javascript — osherez, Feb 27 '18 at 10:10

simons · Answer 1 · 2018-02-27T13:25:19.690

This is based on the answer which Thijs submitted. Any activity in the window after 5 seconds of inactivity should display the message. The CSS determines that the message is not shown by default.

If you are less familiar with jQuery - please note that you need to link to the jQuery library - here via the Google CDN version by including the latest version of the following link:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

#id01 {
    display: none;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Exercises</title>
        <!-- using CDN version of jQuery -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                // Five seconds.
                var THRESHOLD = 5 * 1000;
                // When was the last mouse movement?
                var lastActive = Date.now();
                $(document).on('mousedown mousemove keypress',function(){ 
                    if (Date.now() > lastActive + THRESHOLD) {
                        $('#id01').attr('style', 'display:block');
                    }
                    // Update last mouse movement timestamp.
                    lastActive = Date.now();
                });
            });
        </script>
    </head>
    <body>
    <p>Mousing over the window after 5 secs of inactivity should show the message</p>
    <div style="padding: 20px;"id="id01" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-4">
            <header class="w3-container w3-teal"> 
                <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
            </header>
            <div style="width: 100%" class="w3-container">
                <p id="captcha_advertencia">¡Vaya!</p>
                <img src="imagenes/captchaIncorrecto.jpeg" />
                <p>Los valores que has introducido no se corresponden con el captcha</p>
                <p>Por favor introduce correctamente los caracteres de la imagen</p>
            </div>
        </div>
    </div>
    </body>
</html>

Thijs · Accepted Answer · 2018-02-27T12:28:09.733

2

If you use jQuery you could use the following:

// Five seconds.
var THRESHOLD = 5 * 1000;
// When was the last mouse movement?
var lastActive = Date.now();

$(window).on('mousemove', function() {
    // Test if mouse hasn't moved in over 5 seconds.
    if (Date.now() > lastActive + THRESHOLD) {
       // show modal code
    }
    // Update last mouse movement timestamp.
    lastActive = Date.now();
});

view on codepen

edited Feb 27 '18 at 12:28

answered Feb 27 '18 at 09:51

Thijs

647
5
15

fixed it and added link to codepen. To test, move the mouse over the white square, then wait +5 seconds, and move again. – Thijs Feb 27 '18 at 12:32

Show Modal after user hasnt interact with the page in x minutes

2 Answers2