Hi rani,
Check this example. Now please take its reference and correct your code.
For this example i have used Angular ngIdle directive.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modal
{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content
{
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-idle/1.3.2/angular-idle.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", ['ngIdle']);
app.config(['KeepaliveProvider', 'IdleProvider', function (KeepaliveProvider, IdleProvider) {
IdleProvider.idle(5); // Session timeout.
IdleProvider.timeout(5); // Display Warning before timeout.
KeepaliveProvider.interval(10);
IdleProvider.interrupt('keydown wheel mousedown touchstart touchmove scroll');
} ]);
app.run(function (Idle) {
Idle.watch();
});
app.controller("myCntrl", ['$scope', '$http', 'Idle', 'Keepalive', function ($scope, $http, Idle, Keepalive) {
$scope.IsVisible = false;
$scope.idle = 5; // Session timeout.
$scope.timeout = 5; // Display Warning before timeout.
$scope.IsVisible = false;
$scope.$on('IdleStart', function (e) {
// the user appears to have gone idle.
});
$scope.$on('IdleEnd', function () {
// the user is doing stuff. if you are warning them, you can use this to hide the dialog.
});
$scope.$on('Keepalive', function () {
// do something to keep the user's session alive.
});
$scope.$on('IdleWarn', function (e, countdown) {
// the countdown arg is the number of seconds remaining until then.
// you can change the title or display a warning dialog from here.
// you can let them resume their session by calling Idle.watch()
$scope.IsVisible = true;
document.getElementById('myModal').style.display = "block";
});
$scope.$on('IdleTimeout', function () {
// the user has timed out (meaning idleDuration + timeout has passed without any activity).
// this is where you'd log them.
window.location.href = "https://www.aspsnippets.com/";
});
$scope.Reset = function () {
//Redirect to refresh Session.
window.location = window.location.href;
}
$scope.SignOut = function () {
window.location.href = "https://www.aspsnippets.com/";
}
$scope.$watch('idle', function (value) {
if (value !== null) {
Idle.setIdle(value);
}
});
$scope.$watch('timeout', function (value) {
if (value !== null) {
Idle.setTimeout(value);
}
});
} ]);
</script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
<form id="form1" runat="server">
Session Timeout Demo.
<div ng-show="IsVisible" id="myModal" class="modal">
<div idle-countdown="countdown" class="modal-content">
<h4>Your Session is about to expire!</h4>
<div style="float: left; height: 50px;">
<span class="glyphicon glyphicon-warning-sign text-danger btn-lg" ng-click="Reset()"></span>
</div>
<div idle-countdown="countdown">
Session will expire in <b>{{countdown}}</b> seconds.<br />
Do you want to reset?
<br />
<br />
<button type="button" ng-click="Reset()" class="btn btn-primary btn-sm">Yes</button>
<button type="button" ng-click="SignOut()" class="btn btn-danger btn-sm">No</button>
</div>
</div>
</div>
</form>
</body>
</html>
Demo
