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



我需要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>

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

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);

最新更新