I am currently detecting if a user of my site closes the window/tab or changes the url.

I am using the follwoing code, which works perfectly:

var validNavigation = false;

function endSession() {
  // Browser or broswer tab is closed
  // Do sth here ...
  alert("bye");

}

function wireUpEvents() {

  window.onbeforeunload = function() {
      if (!validNavigation) {
         endSession();
      }
  }

  // Attach the event keypress to exclude the F5 refresh
  $(document).bind('keypress', function(e) {
    if (e.keyCode == 116){
      validNavigation = true;
    }
  });

  // Attach the event click for all links in the page
  $("a").bind("click", function() {
    validNavigation = true;
  });

  // Attach the event submit for all forms in the page
  $("form").bind("submit", function() {
    validNavigation = true;
  });

  // Attach the event click for all inputs in the page
  $("input[type=submit]").bind("click", function() {
    validNavigation = true;
  });

}


$(document).ready(function() {
  wireUpEvents(); 
});

My problem is i would like to change the event from an alert to a overlay. I have setup up a hidden div overlay and replaced the alert in the above code with:

$('.overlay').css('display','block');

This now no longer works, as there is nothing within the div to get the user to stay on the page. (the user doesn't have to click a button within an alert)

Any suggestions on how i can get around this?

Cheers, Dan

I am currently detecting if a user of my site closes the window/tab or changes the url.

I am using the follwoing code, which works perfectly:

var validNavigation = false;

function endSession() {
  // Browser or broswer tab is closed
  // Do sth here ...
  alert("bye");

}

function wireUpEvents() {

  window.onbeforeunload = function() {
      if (!validNavigation) {
         endSession();
      }
  }

  // Attach the event keypress to exclude the F5 refresh
  $(document).bind('keypress', function(e) {
    if (e.keyCode == 116){
      validNavigation = true;
    }
  });

  // Attach the event click for all links in the page
  $("a").bind("click", function() {
    validNavigation = true;
  });

  // Attach the event submit for all forms in the page
  $("form").bind("submit", function() {
    validNavigation = true;
  });

  // Attach the event click for all inputs in the page
  $("input[type=submit]").bind("click", function() {
    validNavigation = true;
  });

}


$(document).ready(function() {
  wireUpEvents(); 
});

My problem is i would like to change the event from an alert to a overlay. I have setup up a hidden div overlay and replaced the alert in the above code with:

$('.overlay').css('display','block');

This now no longer works, as there is nothing within the div to get the user to stay on the page. (the user doesn't have to click a button within an alert)

Any suggestions on how i can get around this?

Cheers, Dan

• javascript
• jquery

• Why don't you simply use window.onbeforeunload? I know it's not a fancy div, but it's definitely intended for these kind of stuff. – Powerslave Commented May 14, 2013 at 10:40
• window.onbeforeunload was an option but now i need a fancy div that needs styling. – danyo Commented May 14, 2013 at 10:42
• Duplicated to stackoverflow./questions/276660/… – Wojciech Bednarski Commented May 14, 2013 at 11:38

1 Answer 1

The window close event is fired as the very last event. Therefore no other events are fired after it.

You can use the beforeunload event with Jquery, to show the overlay on screen.

The following link could help: link