Customize onbeforeunload dialog box

Question

I got an onbeforeunload event in which a dialog box pops up warning users about unsaved form changes as they move.

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

How to customize the dialog box that appears to be more user friendly. Now it is rather cumbersome:

"Are you sure you want to go from this page?

You have unsaved changes.

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

I noticed that in Qaru there is a lot cleaner: “You started to write or edited the message”, and the buttons “Stay on this page”, “Leave this page” instead of the general “Cancel” and “OK”. How can i do this?

I use jQuery if necessary for a solution.

Answer 1

Browsers do not allow you to configure this check box. The only reason it will look different is because you used a different browser when accessing it. Google Chrome uses buttons that say "Stay on this page" and "Leave this page." Based on the text you sent, it looks like you tested the onbeforeunload handler with Internet Explorer.