具有自动关闭功能的 HTML Javascript 模态弹出窗口

Question

主要想法是复制我们在银行或美国运通网站上看到的内容，在那里他们会出现一个 MODAL 弹出窗口，告诉我们会话“即将”到期。

为此，我想添加一个“自动关闭”弹出事件，该事件将在 XX 秒后发生，然后我想调用一个按钮事件 Onclick 以“自动保存”当前工作，然后将用户重定向到退出页面。

所以主要是我想知道执行以下操作的最佳方法是什么：

1) 假设 1 分钟后显示 MODAL 消息（用于测试目的）。这可能是显示在当前页面顶部的 DIV，也可能是 MODAL 对话框消息框。

2) 显示一条消息和一个反向计时器，例如“请在会话到期之前保存您的工作”

3) XX 秒后自动关闭（或隐藏）该消息对话框

4) 调用按钮 onclick 事件。

BackEnd 是使用 C# 的 ASP.NET

Answer 1

这样的事情会让你开始：

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.