Question

我曾使用window.onbeforeunload在用户尝试离开网站时显示自定义消息。

示例：

window.onbeforeunload = function(){
  if(some_condition){
    return "Are you sure you want to navigate away from this page?\nAll unsaved changes will be lost.";
  }
};


+--------------------------------------------------------+
| Are you sure you want to navigate away from this page? |
| All unsaved changes will be lost.                      |
|                                                        |
|          [ Yes ]  [ Cancel ]                           |
+--------------------------------------------------------+

但是，我想稍微提高一点。如果可能的话，我想使用自定义模式表单而不是通用弹出窗口。

有办法做到这一点吗？

Answer 1

绑定到html对我来说非常有效，而不是卸载。这个原因在另一个answer中得到了很好的解释。

$("html").bind("mouseleave", function () {
    $('#emailSignupModal').modal(); \\or any modal
    $("html").unbind("mouseleave");
});

如果您只想在一天内或在任何其他特定条件匹配时显示模态，那么您可以使用cookies。

Answer 2

当用户尝试离开时，unload事件将会触发。但是，如果您使用DIV作为弹出窗口，浏览器将在用户有机会阅读之前离开。

要将它们保留在那里，您必须使用警报/提示/确认对话框。（据我所知）

Answer 3

我看到网站用于此功能的其他替代方法是在用户滚动页面时创建操作，就像他们滚动到地址栏一样，就像这个网站一样http://www.diamondcandles.com/这可以使用 mouseleave < / strong> body元素上的事件。例如：

$( document ).ready(function() { $("body").bind("mouseenter",function(){ /* optional */ }).bind("mouseleave",function(){ if(!$.cookie('promo_popup')) { /* do somthing (ex. init modal) */ /* set cookie so this does not repeat */ $.cookie('promo_popup', '1', { path: '/' }); } }); });

Answer 4

有办法做到这一点吗？

不。

您仍然遇到浏览器提示的提示。

Answer 5

如果他们点击后退按钮或类似的东西，我相信警报/提示/确认框是您唯一的选择。

但是，您可以监听特定的按键事件，例如ctrl / cmd + w / r，并使用对话框中断这些事件。

Answer 6

看看这个：http://rewdy.com/tools/leavenotice-jquery-plugin

从源头上你应该能够一起破解一些东西。 http://github.com/rewdy/leaveNotice/blob/master/uncompressed/jquery.leaveNotice.js

也值得一读：How to popup when a visitor exits from a website

Answer 7

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

var message = "Are you sure you want to navigate away from this page? All unsaved changes will be lost.";

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

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

window.onbeforeunload = confirmOnPageExit;

Answer 8

我只需要为一个项目做这个。

我在所有外部链接上设置rel="external"然后使用JS / Jquery来检测链接是否具有此属性，如果确实如此 - 阻止默认行为而是触发模态。

$('a').on('click', function(e){

  // Grab the url to pump into the modal 'continue' button.
  var thisHref = $(this).attr('href');

  // Grab the attr so we can check if its external
  var attr = $(this).attr('rel');

  // Check if link has rel="external"
  if (typeof attr !== typeof undefined && attr !== false) {

    // prevent link from actually working first.
    e.preventDefault();

    // insert code for firing your modal here! 

    // get the link and put it in your modal's 'continue button'
    $('.your-continue-button').attr('href', thisHref);

  } 

});

希望这有帮助。

Answer 9

嘿，这将帮助您当用户离开您的网站时显示弹出窗口模型或窗口。在使用此代码之前，请尝试运行代码段

<!DOCTYPE html>
<html lang="en">
<head>
  <title>show popup when user leaves website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Show popup when user leaves your website</h2>
  

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Hey! wait for free __________</h4>
        </div>
        <div class="modal-body">
          <p>Get this code for free</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<script>
$(document).ready(function(){
  
  $("html").bind("mouseleave", function () {
    $('#myModal').modal();
    $("html").unbind("mouseleave");
});
});

</script>

</body>
</html>

在用户离开页面之前显示模态表单

9 个答案: