<script src="~/Scripts/jquery-ui-1.11.3.min.js"></script>
<!-- include smoothness jQueryUI theme -->
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="js/jquery.idle-timer.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>    

<script type="text/javascript">
var idleTime = 2000; // number of miliseconds until the user is considered idle
var initialSessionTimeoutMessage = 'Your session will expire in <span id="sessionTimeoutCountdown"></span> seconds.<br /><br />Click on <b>OK</b> to continue your session.';
var sessionTimeoutCountdownId = 'sessionTimeoutCountdown';
var redirectAfter = 10; // number of seconds to wait before redirecting the user
var redirectTo = ' http://www.google.com'; // URL to relocate the user to once they have timed out
var keepAliveURL = 'keepAlive.php'; // URL to call to keep the session alive
var expiredMessage = 'Your session has expired.  You are being logged out for security reasons.'; // message to show user when the countdown reaches 0
var running = false; // var to check if the countdown is running
var timer; // reference to the setInterval timer so it can be stopped
$(document).ready(function() {
// create the warning window and set autoOpen to false
var sessionTimeoutWarningDialog = $("#dialog");
$("#dialog").html(initialSessionTimeoutMessage);
$("#dialog").dialog({
    'closeOnEscape': false,
    'minHeight': 50,
    'title': 'Session Expiration Warning',
    'modal': true,
    'autoOpen': false,
    'width': 574,
    'resizable': false,
    'draggable': false,
    'beforeclose': function() { // bind to beforeclose so if the user clicks on the "X" or escape to close the dialog, it will work too
        // stop the timer
        clearInterval(timer);

        // stop countdown
        running = false;

        // ajax call to keep the server-side session alive
        $.ajax({
          url: keepAliveURL,
          async: false
        });
    },
    'buttons': {
        OK: function() {
            // close dialog
            $(this).dialog('close');
        }
    },
    'open': function() {
        // scrollbar fix for IE
        $('body').css('overflow','hidden');
    },
    'show': {
        'effect': 'fade'
    },
    'close': function() {
        // reset overflow
        $('body').css('overflow','auto');
    }
}); // end of dialog


// start the idle timer
$.idleTimer(idleTime);

// bind to idleTimer's idle.idleTimer event
$(document).bind("idle.idleTimer", function(){
    // if the user is idle and a countdown isn't already running
    if($.data(document,'idleTimer') === 'idle'){
        var counter = redirectAfter;
        running = true;

        // intialisze timer
        $('#'+sessionTimeoutCountdownId).html(redirectAfter);
        // open dialog
        $(sessionTimeoutWarningDialog).dialog('open');

        // create a timer that runs every second
        timer = setInterval(function(){
            counter -= 1;

            // if the counter is 0, redirect the user
            if(counter === 0) {
                $(sessionTimeoutWarningDialog).html(expiredMessage);
                $(sessionTimeoutWarningDialog).dialog('disable');
                window.location = redirectTo;
            } else {
                $('#'+sessionTimeoutCountdownId).html(counter);
            };
        }, 1000);
    };
});

});
</script>

<h1>jQuery session timeout countdown with warning dialog</h1>
<p>
This idle timeout countdown is triggered after 2 seconds. Keep your mouse and keyboard still!
<br /><br />
<a href=”http://www.google.com”>Return to Blog Post</a>
</p> <div id=”dialog” title=”Basic dialog” style=”display:none”>
<p id=”dialog_content”> </p>