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