lundi 20 avril 2015

How to display an alert if there is no user activity on the page

Basically I need to redirect user back to home page if there is no activity (keypress and mousemove) from user for 2 minutes (after 2 minutes, wait for 10 more seconds then redirect). With very little knowledge of JS and Jqery, I just got the code from here: How to automatically reload a page after a given period of inactivity and it works fine:

<!-- BEGIN Auto redirect if no activity detected -->
<script>
    var time = new Date().getTime();
    $(document.body).bind("mousemove keypress", function (e) {
        time = new Date().getTime();
    });

    function refresh() {
        if (new Date().getTime() - time >= 120000) //
            window.location.href = '/checkin-welcome.aspx';
        else
            setTimeout(refresh, 10000);
    }

    setTimeout(refresh, 10000);
</script>
<!-- END Auto redirect if no activity detected -->

It would be nicer if we give user an warning instead of just redirecting without any notice. How do I make it display a nice bootstrap modal/alert letting them know that the page will be redirected in 10 seconds (and counting down 9, 8, 7...) and there a button "Give me more time" that allow when user click it will close the alert and reset the timer (give them another 2 minute)? (I have Bootstrap & Jquery library in the page, I just don't like the default, plain alert)

Aucun commentaire:

Enregistrer un commentaire