jquery - How to create a Popup if the mouse is idle for particular period in a webpage?

Question

I am a newbie to web development. I need help in implementing a popup window for entering username and contact number which gets stored in the database. The popup should fire if the user is idle for a particular period of time say 10 seconds.

I tried searching it but didn't get proper solution for implementing it. Please help me out in doing it. Thanks in advance.

Answer 1

(function($){
    $(function() {
        var _timeout,
            _wait = 15000; // 15 seconds

        $(document).mousemove(function() {
            clearTimeout(_timeout);
            _timeout = setTimeout(function() {
                alert("you havent moved for " + _wait + " seconds!");
            }, _wait);
        });
    });
})(jQuery);

The above code provides the idle logic. I would recommend though to bind the mousemove event to a certain element rather than to the document, because this can cause performance issues.

For the popup I would recommend the jQuery dialog/ modal plugins.