HTML Javascript Modal Popup Window with Auto Close

Question

The main idea is to replicate what we see on the Banks or American Express sites, where a MODAL Popup appears to they tell us that the session "is going" to expire.

To this, I wanted to add an "Auto-Close" Popup event that will happen after XX seconds and then I will want to call a button event Onclick to "auto save" the current work, before redirecting the user to the Logout page.

So mainly I would like to know what's the best way to do the following:

1) Display a MODAL Message after let's say 1 minute (for testing purposes). This could be a DIV appearing on top of the current page, or a Dialog Message Box both MODAL.

2) Display a message and also a Reverse Timer, something like "Please save your work before the session expires"

3) Auto Close (or hide) that Message dialog after XX seconds

4) Call a button onclick event.

BackEnd is ASP.NET using C#

Icarus Icarus · Accepted Answer · 2012-05-10T22:06:45

Something like this will get you started:

setTimeout(WarnTheUser,10000);//fires after 10 seconds

function WarnTheUser()
{
     document.getElementById('warningDiv').innerHTML="<H1>This page will auto save in 1 minute</H1>"; //or whatever
     setTimeout(saveData,60000);
}

function saveData()
{
   form.submit();//adjust accordingly
}

jsfiddle.

HTML Javascript Modal Popup Window with Auto Close

1 Answers