如何控制后退按钮并继续对话框答案

【问题标题】：How to control the back buttons and continue with a dialog box如何控制后退按钮并继续对话框
【发布时间】：2017-08-24 14:48:31
【问题描述】：

我需要 jQuery 方面的帮助。我会在我的表单中使用一个对话框。我想当我点击“后退”按钮时显示对话框。通过单击“是”，我可以返回到我页面的上一页，如果单击“否”按钮，我将停留在当前页面上。通过单击“前进”按钮，我继续下一页而不提醒对话框。请问，你是怎么做到的？下面是我的基本源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="jquery-ui-1.10.4/css/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>

        <title>Test</title>
<script>
let validation = function(form) {

  $("#dialog").dialog({
    modal: true,
    buttons: {
      Yes: function() {
        $(this).dialog("close");
        document.getElementById("myForm-previous").submit();
      },
      No: function() {
        $(this).dialog("close");
      }
    }
  });

  return false;

}
</script>
    </head>

    <body>


    <div id="dialog" title="Confirmation">
<p>Warning!!!
You will lose your data!
Do you want to continue ?</p>
    </div>
<form id="myForm" name="myFrom"/>
        <input type="file"/><br/>
        <input type="file"/><br/>
        <input id="myForm-previous" value="BackWard" type="submit" onclick="return validation()"/><br/>
        <input id="myForm-next" value="Forward" type="submit"/>

</form>
</body> 
</html>

【问题讨论】：

标签： jquery jquery-ui jquery-plugins

【解决方案1】：

我认为您正在寻找此解决方案

const backButtonListener = () => { 
    const answer = confirm('are you sure?'); // here you can toggle your popup
    history.pushState(null, null, document.URL);
}

window.onpopstate = backButtonListener;
history.pushState(null, null, document.URL);

example

【讨论】：