I've got an onbeforeunload event working that pops up a dialog box warning users about unsaved changes to a form when they navigate away.

window.onbeforeunload = function() {
    return 'You have unsaved changes.';
};

How do I customize the dialog box that shows up so it's a little more user friendly. Right now it's rather unwieldy:

"Are you sure you want to navigate away from this page?

You have unsaved changes.

Press OK to continue, or Cancel to stay on the current page."

I notice that Stack Overflow has one that is much cleaner: "You have started writing or editing a post", and the buttons say "Stay on this page", "Leave this page" instead of a generic "Cancel" and "OK". How can I do that?

I am using jQuery, if that's necessary for the solution.

I've got an onbeforeunload event working that pops up a dialog box warning users about unsaved changes to a form when they navigate away.

window.onbeforeunload = function() {
    return 'You have unsaved changes.';
};

How do I customize the dialog box that shows up so it's a little more user friendly. Right now it's rather unwieldy:

"Are you sure you want to navigate away from this page?

You have unsaved changes.

Press OK to continue, or Cancel to stay on the current page."

I notice that Stack Overflow has one that is much cleaner: "You have started writing or editing a post", and the buttons say "Stay on this page", "Leave this page" instead of a generic "Cancel" and "OK". How can I do that?

I am using jQuery, if that's necessary for the solution.

• javascript
• jquery
• navigation
• onbeforeunload

1 Answer 1

Browsers don't let you customize this box at all. The only reason it would look different on SO is because you were using a different browser when you accessed it. Google Chrome uses buttons labeled 'Stay on this page' and 'Leave this page'. Based on the example text you posted, it looks like you tested your onbeforeunload handler using Internet Explorer.