Javascript 当您导航到其他页面时，显示类似facebook的自定义警报框

当用户尝试从现有页面导航时，我希望显示自定义警报框，而不是浏览器默认警报框。使用此代码：

 window.onbeforeunload = function(){
    return "are you sure?";
 }

如果用户有任何未保存的数据并想离开页面，我可以使用此代码来提醒用户。但我想用我自己的设计制作一个定制的提醒框，就像facebook一样。这怎么可能？比如：

 window.onbeforeunload = function(){
    myownalertbox.show();  //here I want to bind leave page or stay on page button with my own button.
 }

---

我想在这个页面上绑定，并将这个页面按钮留给我的按钮。

最初的答案适用于IE6-8和FX1-3.5，但现在已经过时了，在大多数当前浏览器中都不起作用-我把它放在下面以供参考

并非所有浏览器都一致地处理

窗口.onbeforeunload

。它应该是一个函数引用，而不是一个字符串（如原始答案所述），但在较旧的浏览器中可以使用，因为大多数浏览器的检查似乎是在卸载之前是否为

指定了任何内容（包括返回
null
）的函数）

您可以将
window.onbeforeunload
设置为函数引用，但在较旧的浏览器中，您必须设置事件的
returnValue
，而不仅仅是返回字符串：

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

如果希望用户在没有消息的情况下继续，则不能让该
confirmOnPageExit
执行检查并返回null。您仍然需要删除事件才能可靠地打开和关闭它：

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

要打开它，请执行以下操作：

window.onbeforeunload = "Are you sure you want to leave?";

要关闭它，请执行以下操作：

window.onbeforeunload = null;

请记住，这不是一个正常的事件-您不能以标准方式绑定到它

检查值？这取决于您的验证框架

在jQuery中，这可能类似（非常基本的示例）：

我会使用一些普通的HTML布局，并使用CSS的
display:none/
显示：块

例如（你做你的造型）：

CSS:

JAVASCRIPT:

var myownalertbox = {

  show: function(message) {
    var popup = document.createElement("DIV");
    popup.className = "popup";
    document.body.appendChild(popup);
    popup.style.display = "block";
    popup.innerHTML = message;
    var ybutton = document.createElement("BUTTON");
    ybutton.innerHTML = "YES";
    var nbutton = document.createElement("BUTTON");
    nbutton.innerHTML = "NO";
    ybutton.onclick = function () {
     // do with "YES"
     window.location = "/main.html"; // <-- go back to the main page
     popup.style.display = "none";
    }
    nbutton.onclick = function () {
     // do with "NO"
     window.location = "#"; // <-- stay at this page
     popup.style.display = "none";
    }
    popup.appendChild(ybutton);
    popup.appendChild(nbutton);
  }
}

myownalertbox.show("ARE YOU SURE?");

var myownalertbox={
显示：功能（消息）{
var popup=document.createElement（“DIV”）；
popup.className=“popup”；
document.body.appendChild（弹出窗口）；
popup.style.display=“block”；
popup.innerHTML=消息；
var ybutton=document.createElement（“按钮”）；
ybutton.innerHTML=“是”；
var nbutton=document.createElement（“按钮”）；
nbutton.innerHTML=“否”；
ybutton.onclick=函数（）{
//用“是”来做
window.location=“/main.html”//您可以尝试此网站。
这不是一个自定义的警报框，但它提供了一个非常漂亮的警报框。
我给您附上了一个链接，我在这里使用代码自定义了我的对话框/警报框。希望这对您有所帮助

问题不在于实现自定义警报框（正如其他一些答案所指出的那样），这不是一件困难的事情，有很多解决方案、框架、插件等。问题在于JavaScript执行时间

使用
onbeforeunload
处理程序不可能实现您的目标，因为它需要“同步”运行：您无法显示警报，返回某些内容，然后稍后使用回调返回并返回实际值。当您从函数返回时，浏览器将使用结果，您将最终显示自定义警报框，但用户操作将“丢失”，因为处理程序已完成

更进一步说，我从来没有找到任何解决方案可以提供自定义警报框，它在这个意义上是同步的。所谓同步行为，我的意思是，代码执行将被阻止，直到用户单击警报按钮。我见过的每个自定义警报/确认/提示解决方案都使用回调。最后但并非最不重要的是JavaScript甚至没有提供一种“阻塞等待”的方式

更新

你能做的（Facebook也能做）是处理导航链接、按钮、点击等，你知道这些会离开页面，在那里你可以显示一个自定义确认框

注意：事实上我已经尝试过Facebook，对我来说（Windows10，Chrome最新版本）当我试图关闭浏览器选项卡时，它会提示默认确认框，而不是任何自定义确认框。但当我单击链接时，它确实显示了一个自定义确认框。因此，总结一下，Facebook在可能时使用自定义确认框，在不可能时使用自定义确认框（仅在
onbeforeunload
中，如浏览器关闭、选项卡关闭、页面重新加载、URL导航等）它使用默认处理机制

注2：2016年，似乎所有主要浏览器都选择不让开发人员自定义卸载前显示在
上的消息，因此处理程序返回的
字符串
值不会被视为消息。有几篇文章介绍了这一点。主要原因是安全性，因为很多网站都使用它用于欺骗天真用户并要求他们执行某些操作，或提示他们恶意内容等。现在所有主要浏览器都会显示一条默认消息，说明可能存在未保存的更改。
$（'a'）。在（'click'，function（）{alert（'You're leaving？'）}）
这不是我想要的。我想显示自己的自定义警报框。请删除从你的标题中可以看到“喜欢facebook”，因为它暗示了一些facebook功能的回答者"很清楚。我可能不够清楚，但唯一能做到这一点的方法是用出站的HREF等捕捉元素上的点击，然后在点击链接之前弹出你自己的模式。不幸的是，注释字段太小，我无法包含工作模式，所以我只使用了
警报
作为说明rposes，我认为很明显，
alert
可以被该片段中的任何内容替换。但是如何像facebook那样用div显示自定义警报框。我已经编辑了我的问题。我想像facebook中的那些在
窗口中使用自定义警报框的人一样发出警报。onbeforeunload
，而不是浏览器的defau
.popup {
  display: none;
  position: absolute;
  left: 20%;
  top: 20%;
  height: 60%;
  width: 60%;
  background-color: orange;
}

var myownalertbox = {

  show: function(message) {
    var popup = document.createElement("DIV");
    popup.className = "popup";
    document.body.appendChild(popup);
    popup.style.display = "block";
    popup.innerHTML = message;
    var ybutton = document.createElement("BUTTON");
    ybutton.innerHTML = "YES";
    var nbutton = document.createElement("BUTTON");
    nbutton.innerHTML = "NO";
    ybutton.onclick = function () {
     // do with "YES"
     window.location = "/main.html"; // <-- go back to the main page
     popup.style.display = "none";
    }
    nbutton.onclick = function () {
     // do with "NO"
     window.location = "#"; // <-- stay at this page
     popup.style.display = "none";
    }
    popup.appendChild(ybutton);
    popup.appendChild(nbutton);
  }
}

myownalertbox.show("ARE YOU SURE?");