在浏览器窗口/标签关闭时打开自定义弹出窗口

Question

I am trying to open a custom popup on browser window\/tab close.我正在尝试在浏览器窗口\/标签关闭时打开一个自定义弹出窗口。

In details if a user clicks on the browser window\/tab close button a custom popup will appear with some content or may be having some option asking to close or continue the page.详细地说，如果用户单击浏览器窗口\/选项卡关闭按钮，则会出现一个带有一些内容的自定义弹出窗口，或者可能有一些选项要求关闭或继续页面。

here is the code which only bring the default alert popup:这是仅带来默认警报弹出窗口的代码：

window.onbeforeunload = function() {
              var message = 'Do you want to leave this page?';
              return message;
          }

Answer 1

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text\/html; charset=UTF-8" \/> <script src="https:\/\/code.jquery.com\/jquery-3.3.1.min.js"><\/script> <title>K3logics.com<\/title> <script> var mouseX = 0; var mouseY = 0; var popupCounter = 0; document.addEventListener("mousemove", function(e) { mouseX = e.clientX; mouseY = e.clientY; document.getElementById("coordinates").innerHTML = "<br \/>X: " + e.clientX + "px<br \/>Y: " + e.clientY + "px"; }); $(document).mouseleave(function () { if (mouseY < 100) { if (popupCounter < 1) { alert("Please do not close the tab!"); } popupCounter ++; } }); <\/script> <\/head> <body> <div id="page-wrap"> <span id="coordinates"><\/span> <h1>Hi, Move your mouse cursor around then try to close the window of browser! - <a href="https:\/\/www.k3logics.com" target="_blank">https:\/\/www.k3logics.com<\/a><\/h1>

<\/body> <\/html><\/code><\/pre>

"

Answer 2

i would also suggest you dont do this, However, you asked a question and deserve an answer.我也建议你不要这样做，但是，你问了一个问题，应该得到一个答案。

UPDATE (2022) This code does not work anymore due to new browser security settings.更新 (2022)由于新的浏览器安全设置，此代码不再有效。

 var popit = true; window.onbeforeunload = function() { if (popit == true) { popit = false; return "Are you sure you want to leave?"; } }

Answer 3

在此处输入图像描述 <\/a>

On october 2019 it's possible just in internet explorer https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/beforeunload_event<\/a>在 2019 年 10 月，可以在 Internet Explorer https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/beforeunload_event<\/a>

"

Answer 4

window.onbeforeunload = function (e) 
{
    e = e || window.event;

        e.returnValue = 'You want to leave ? ';


};

jsFiddle jsFiddle

Answer 5

The feature you're talking about is the window.onbeforeunload event, and unfortunately the only way it can be customized is to provide a custom string message for the user, because the potential for abuse is so high.您正在谈论的功能是 window.onbeforeunload 事件，不幸的是，可以自定义它的唯一方法是为用户提供自定义字符串消息，因为滥用的可能性非常高。

The api reference over at msdn for Internet Explorer states:在 msdn 上为 Internet Explorer 提供的 api 参考说明：

The default statement that appears in the dialog box, "Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.", cannot be removed or altered.

Answer 6

If you're open to use jQuery UI, then you can use Dialog<\/strong><\/a> .如果您愿意使用 jQuery UI，那么您可以使用Dialog<\/strong><\/a> 。 Simple and look attractive.简单，看起来很有吸引力。

"

在浏览器窗口/标签关闭时打开自定义弹出窗口

问题描述

6 个解决方案

解决方案1
8 2018-11-13 12:50:44

解决方案2
6 2013-10-09 04:42:47

解决方案3
2 2019-10-02 23:04:33

解决方案4
1 2013-10-09 06:41:07

解决方案5
0 2013-10-09 04:46:42

解决方案6
-7 2013-10-09 04:41:58

在浏览器窗口/标签关闭时打开自定义弹出窗口

问题描述

6 个解决方案

解决方案1 8 2018-11-13 12:50:44

解决方案2 6 2013-10-09 04:42:47

解决方案3 2 2019-10-02 23:04:33

解决方案4 1 2013-10-09 06:41:07

解决方案5 0 2013-10-09 04:46:42

解决方案6 -7 2013-10-09 04:41:58

解决方案1
8 2018-11-13 12:50:44

解决方案2
6 2013-10-09 04:42:47

解决方案3
2 2019-10-02 23:04:33

解决方案4
1 2013-10-09 06:41:07

解决方案5
0 2013-10-09 04:46:42

解决方案6
-7 2013-10-09 04:41:58