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

Question

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

Answer 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 中公开看到。