Looking for code for a modal window that alerts users before session timeout

Does anyone have sample code for a modal window that will alert user of session timeout a few minutes before a two hour long session is ending?

Thanks very much in advance.
LVL 5
parikaaAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
You mean


<html>
<head>
<link rel="stylesheet" type="text/css" href="subModal.css" />
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="subModal.js"></script>
<script>
var tID = "";
function sessionEnd() {
  showPopWin('yoursessionIsEnding.html', 300, 400, reloadPage);
}
function reloadPage() {
  location.reload(1); // reload the page
}
</script>
</head>
 
<body onLoad="tID=setTimeout('sessionEnd()',<%= Session.Timeout %>*60000)">

Open in new window

0
 
gops1Commented:
window.open though it is browser compatible but it is difficult to achieve a modal popup from it. This code might give you some ideas.

May be you can try with some DHTML popup and disable all clicks from parent.
<html>
	<head>
		<title>Script Demo Gops&reg;</title>
		<style>
			body, table,input, select,span{font-family:verdana;font-size:xx-small;}
		</style>
		<script language="javascript">
			var timer=null;
			var sessionTime=15000; //assuming 15 seconds
			function new_popup(title, name) {
				newWindow=window.open ("", 'popup',
				'screenx=60,\
				screeny=60, \
				toolbar=,   \
				directories=,\
				status=,     \
				scrollbars=1,\
				resizable=1, \
				menubar=,    \
				height=400,  \
				width=400'
				);
				newWindow.document.open();
				newWindow.document.write('<html><head><title>' + title + '</title></head>');
				newWindow.document.write('<body onBlur="this.focus()"  bgcolor="#ffffff" leftmargin=0 marginwidth=0 topmargin=0 marginheight=0>');
				newWindow.document.write(' <a href="javascript:window.opener.location.href=\'sessiontimeout.html\';self.close();">Close</a>');
				newWindow.document.write('</body></html>');
				newWindow.document.close();
				return true;
			}
 
			window.onload=function(){
				if (document.addEventListener){
					document.addEventListener("mouseover", resetSession, true);
					document.addEventListener("click", resetSession, true);
					document.addEventListener("keypress", resetSession, true);
				}else if(document.attachEvent){
					document.attachEvent("onmouseover", resetSession);
					document.attachEvent("onclick", resetSession);
					document.attachEvent("onkeypress", resetSession);
				}
				document.getElementById('stimer').value=sessionTime;
				timer=setInterval("runSessionTimer()",1000);
			}
 
			function resetSession(){
				sessionTime=15000;
				clearInterval(timer);
				document.getElementById('stimer').value=sessionTime;
				timer=setInterval("runSessionTimer()",1000);
			}
 
			function runSessionTimer(){
				sessionTime=sessionTime-1000;
				document.getElementById('stimer').value=sessionTime;
				if(sessionTime<=0){
					new_popup("Session Time Out","Session");
					clearInterval(timer);
				}
			}
 
		</script>
	</head>
	<body>
		Session Timer:<input type="text" value="" id="stimer">
	</body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Gops, please fix your code to include values on
toolbar=,   \
directories=,\
status=,     \

or remove them. I have seen this code before and it is not valid without a value or without the =
so either

toolbar=1,   \
directories=1,\
status=1,     \

or

toolbar,   \
directories,\
status,     \


OR

toolbar=0,   \
directories=0,\
status=0,     \

OR remove them since specifying one parameter turns the rest off
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
Michel PlungjanIT ExpertCommented:
Alternative is submodal

http://www.google.com/search?q=submodal
0
 
gops1Commented:
Sorry Michel, i will fix that when I use it next time
0
 
Michel PlungjanIT ExpertCommented:
great, thanks
Michel
0
 
parikaaAuthor Commented:
mplungjan,

Thanks the submodal is exactly what I am looking for!
Can you please help me to display the submodal window when a session is about to expire; instead of when a button is clicked?
Thank you very much
0
 
bisola_4Commented:
I am truly happy i saw this..
I just downloaded the submodal files
except i want the window to be called only once per session in the browser.

I called it on the website's homepage but each time a user goes to the homepage, it displays the DHTML modal window once more.. kind'a annoying.

So I will post a question on how to modify it to show just once per session (only come back after the browser is re-opened)

Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.