Display modal form before user leaves page_问答_开发者

I've used window.onbeforeunload to display a custom message when a user attempts to leave a site.

Example:

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.                      |
|                                                    开发者_StackOverflow社区    |
|          [ Yes ]  [ Cancel ]                           |
+--------------------------------------------------------+

However, I'd like to enhance this a bit. If possible, I'd like to use a custom modal form instead of the generic popup.

Is there a way to do this?

Binding to a html has worked very well for me instead of unload. The reason is well explained in another answer here.

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

If you want to show the modal only once in a day or on any other particular condition match then you can use cookies.

The unload event will fire when a user tries to navigate away. However, if you use a DIV as a pop-up the browser will navigate away before the user has a chance to read it.

To keep them there you'd have to use a alert/prompt/confirm dialog boxes. (as far as I know)

Is there a way to do this?

Nope.

You are stuck with the prompt the browser gives you.

another alternative I see sites use for this functionality is creating an action when the user scrolls off the page like when they scroll to the address bar like this site does http://www.diamondcandles.com/ this can be done using mouseleave event on the body element. For example:

$( 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: '/' });

    }
 });
});

If they click the back button or something similar, I believe the alert/prompt/confirm boxes are your only option.

However, you can probably listen for specific keypress events, like ctrl/cmd + w/r, and interrupt those with a dialog.

Hey this will help you to show a popup model or window when a user leaving your website. Before using this code please try Run code snippet

<!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>

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;

I've just had to do this for a project.

I set rel="external" on all external links then used JS/Jquery to detect if the link has this attribute, and if it does - prevent the default behavior and instead fire a modal.

$('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);

  } 

});

Hope this helps.