2017-08-24 74 views
0

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

回答

0

我認爲你正在尋找這種解決方案

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

相關問題