当使用jQuery打开弹出窗口时，如何避免刷新页面或单击后退按钮？

Question

I am developing one stepwise form application where I am displaying some information on Modal popup. I am able to display the required information. If I refresh the page when the Modal is open the current Modal will close. Is there any way to stop closing the Modal on page refresh?

Answer 1

You can not prevent user clicking the refresh button. Instead you can keep the state of the form in the local storage and in the page load event check if the user was in the middle of the form process.

If so, just show the modal again. There's no any other way.

 //This is an example. This should be added when the user seen the dialog. //This is just a Bootstrap example. Just to demonstrate the logic. $("#modal-dialog").on("shown.bs.modal", function(){ localStorage.setItem("IS_SET", true); }); $("#modal-dialog").on("hidden.bs.modal", function(){ localStorage.setItem("IS_SET", false); }); $(document).ready(function(){ if(localStorage.getItem("IS_SET") && localStorage.getItem("IS_SET") === true){ //Which means the user was in the form process. //And show the modal again on page refresh. $("#modal-dialog").modal("show"); } }); 

If you don't like the localstorage method, you can set a URL param which can be seen publicly in the URL.