覆盖 window.history.go(-1)答案

【问题标题】：Overlay on window.history.go(-1)覆盖 window.history.go(-1)
【发布时间】：2013-10-23 15:01:50
【问题描述】：

我想完成这个：

当用户通过 Google Ad-words 访问我们的页面并打算通过浏览器中的后退按钮离开页面时，我想向他展示一个渲染的叠加层，其中包含一些内容（“找不到什么看起来为？打电话给我们，我们会帮助你！”......等等等等）。当然，用户可以关闭它并返回 Google。

当用户在他的浏览器中按下“返回”按钮时，是否有任何乳清来获取事件处理程序，以便我可以弹出我自己的弹出窗口？ :-)

另外：这不应该影响点击链接或重新加载页面。

来自德国的问候

【问题讨论】：

如果你找到方法 - 让我知道。 ^^ 但我认为没有标准的警报窗口是不可能的 - 你只能添加一些东西但不能替换警报......

标签： javascript jquery overlay back browser-history

【解决方案1】：

您需要创建一个 div 作为您的叠加层和一个包含您要向用户显示的信息的对话框。当你的事件被触发时，使用 jquery.show() 来显示覆盖和对话框。

你可以试试这样的：

<html>
   <head>
      <style type="text/css">
           #fullscreen { display:none; position: fixed; z-index:500;  min-height: 100%;  min-width: 1024px;  width: 100%; height: auto; background-color: #565656; top:0; left:0px; margin:0; padding:0; opacity: .5;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";  filter: alpha(opacity=50);}      
           #myDialog {display:none;}
      </style>
   </head>
   <body>
      <div id="fullscreen"></div>
      <div id="myDialog title="My Dialog Title" ></div>
   </body>

   <script type="text/javascript>
$(document).ready(function () {
    //When the user attempts to navigate away from the current page...
    $(window).unload(function () {
        $('fullscreen').show();

            $(function () {
                $("#myDialog ").dialog({
                    resizable: false,
                    closeOnEscape: false,
                    width: 660,
                    modal: true,
                    open: function (event, ui) {
                        //hide close button.
                        $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
                    },
                    buttons: {
                        "OK": function () {
                            $(this).dialog("close");
                            $("fullscreen").hide();
                            window.location = "http://mypage.com";
                        },
                        "No, thanks": function () {
                            $(this).dialog("close");
                            $("fullscreen").hide();
                        }
                    }
                });
            });
       });
    });
});
</script>
</html>

然后执行任何需要的操作。如果您不熟悉 jQuery 的这些方面，我建议您查看对话框的文档：http://jqueryui.com/dialog/

【讨论】：

嘿，感谢您的快速回复，我想我说得不够清楚：这不是关于覆盖，而是关于如何防止用户“返回”谷歌。跨度>