如何跳过确认弹出on beforeload并显示我自己的bootstrap模式？ [英] how to skip confirm pop up on beforeunload and show my own bootstrap modal?

问题描述

我想跳过 beforeunload 事件的默认弹出窗口，并希望显示我自己的模态，要求用户提供有关浏览器/选项卡关闭的反馈。在该模式中，如果用户单击确定，则我想将用户重定向到我的反馈页面，如果用户单击否，则应关闭特定选项卡。有没有办法做到这一点？

I want to skip the default pop up which will come on beforeunload event and want to show my own modal which is asking the user to give feedback on browser/tab close. In that modal if user click "OK" then I want to redirect the user to my feedback page and if the user clicks "NO" then the particular tab should close. Is there a way to do this?

推荐答案

你可以在这里阅读： https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload 自定义字符串的 beforeunload 事件的 event.returnValue 。像这样：

As you can read here: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload you may change the event.returnValue of the beforeunload event to a custom string. Like this:

window.addEventListener("beforeunload", function( event ) {
  event.returnValue = "Don't leave!";
});

当用户离开当前页面时，这将打开一个确认对话框。
您可以在此活动中打开您的模态窗口，但这不会阻止用户表格离开，因此不会看到新内容。

This will open a confirm dialog when the user is leaving the current page. You may open your modal window in this event, but this will not stop the user form leaving, so new content will not be seen.

当然卸载无法取消活动（ https://developer.mozilla.org/en-US/docs/Web/Events/unload ）和UI交互无效（window.open，alert，confirm等）

Of course the unload event can not be canceled (https://developer.mozilla.org/en-US/docs/Web/Events/unload) and UI interactions are ineffective (window.open, alert, confirm etc.)

所以我认为最接近你可以得到它： http://jsfiddle.net / s6qWr /

So i think the closest you can get it this: http://jsfiddle.net/s6qWr/

var $modal = document.getElementById("modal");
window.addEventListener("beforeunload", function(event){
    $modal.classList.add("visible"); 
    event.returnValue = "Please tell us about your experience";
});

这篇关于如何跳过确认弹出on beforeload并显示我自己的bootstrap模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！