Question

我需要jQuery的帮助。我会在表单中使用一个对话框。我希望当我点击＆＃34; Backward＆＃34;按钮显示对话框。点击＆＃34;是＆＃34;我可以回到我的页面的上一页，如果我点击No按钮，我会留在当前页面上。通过点击＆＃34;转发＆＃34;按钮我继续在下一页上没有提示对话框提示。拜托，你是怎么做到的？在我的基本源代码下面：

<!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>

Answer 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

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

1 个答案: