2017-08-24 10 views
0

jQueryのヘルプが必要です。 フォームにダイアログボックスを使用します。 "Backward"ボタンをクリックしてダイアログボックスを表示したいと思います。 「はい」をクリックすると、私のページの前のページに戻ることができます。また、いいえボタンをクリックすると、現在のページに留まります。 「転送」ボタンをクリックすると、ダイアログボックスに警告することなく次のページに進みます。どうか、どうしますか?私の基本的なソースコードの下 :バックボタンを制御してダイアログボックスを続ける方法

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

を探していると思います
関連する問題