使用jquery打开弹出窗口时如何避免刷新页面或后退按钮单击？答案

【问题标题】：how to avoid refresh page or back button click when popup is open using jquery?使用jquery打开弹出窗口时如何避免刷新页面或后退按钮单击？
【发布时间】：2017-09-18 09:33:01
【问题描述】：

我正在开发一个逐步表单应用程序，其中我在模态弹出窗口中显示一些信息。我能够显示所需的信息。如果我在模态打开时刷新页面，当前模态将关闭。有什么办法可以在页面刷新时停止关闭 Modal？

【问题讨论】：

我认为你做不到。您能做的最好的事情就是向用户发出警报，告知他们将破坏内容。此链接可能会有所帮助 - stackoverflow.com/a/7080331/7643022

标签： javascript jquery

【解决方案1】：

您无法阻止用户单击刷新按钮。相反，您可以将表单的状态保留在本地存储中，并在页面加载事件中检查用户是否处于表单过程的中间。

如果是这样，只需再次显示模态。没有其他办法。

//This is an example. This should be added when the user seen the dialog.
//This is just a Bootstrap example. Just to demonstrate the logic.
$("#modal-dialog").on("shown.bs.modal", function(){
  localStorage.setItem("IS_SET", true);
});

$("#modal-dialog").on("hidden.bs.modal", function(){
  localStorage.setItem("IS_SET", false);
});

$(document).ready(function(){
  if(localStorage.getItem("IS_SET") && localStorage.getItem("IS_SET") === true){
     //Which means the user was in the form process.
     //And show the modal again on page refresh.
     $("#modal-dialog").modal("show");
  }
});

如果你不喜欢 localstorage 方法，你可以设置一个 URL 参数，可以在 URL 中公开看到。

【讨论】：