CODEWITHSUNDEEP
javascriptphphtmlcss
Rddevelop
Rddevelop

Reputation: 135

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

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

Upvotes: 0

Views: 625

Answers (2)

simons
simons

Reputation: 2400

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>

Upvotes: 3

Thijs
Thijs

Reputation: 717

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

Upvotes: 2

Related Questions