Jquery prevent window closing

Question

I want to ask user whether he really want to leave the page or not, when he clicks the close button just like it done in google docs. How to do that using jquery?

Answer 1

Perhaps this discussion can help you?

Answer 2

You set the window's onbeforeunload property to a function.

This post has a good example on how to do it.

Or another example:

<script language="JavaScript">
  var needToConfirm = true;

  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    if (needToConfirm)
      return message to display in dialog box;
  }
</script>

...

<input type="Submit" value="Save" onclick="needToConfirm = false;" />

And to set neetToConfirm for your form you can:

$(document).ready(function() { 
    $(':input', document.myForm).bind("change", function() { needToConfirm = true; }); // Prevent accidental navigation away
});

Answer 3

JQuery UI may be useful for you - see this link. It shows a few different types of dialog - the one you want is "Modal Confirmation" I think. Bear in mind though, the JQuery UI library is pretty hefty, so it may be that it'd be better for you to look up a more bespoke option (a few came up by searching for JQuery Confirm Modal). I can't vouch for the quality of those solutions as I've never tried them.