Multiple choices in beforeunload dialog

Question

I've created a page, where a user can edit data. What I want here is basically a confirmation dialogue with 3 choices, when the page is unloaded and there is still unsaved data:

• yes - leave the page and save
• no - leave the page and don't save
• cancel - stay on the page and don't save

I know how I would go on about confirming page leaving and saving separately, but I don't really want to bug the user twice.

I'm not sure if this is possible at all, as it seems to be necessary to change the "do you want to leave"-dialogue of the browser. Is there a way around this? Any other solution is also welcome.

Answer 1

The onbeforeunload method does not let you edit what buttons will display. It doesn't even allow you to get rid of the default text, but you can add some text to it. What I recommend you do is just let the user know that there is unsaved data and if the user continues then it will be lost.

Another option is anchoring. Anchoring is when you add a function to objects that are in your page, so this option won't work if they hit the back button, go to a new URL, or close the window. But, let's say they hit log-out or a different button that you own, you can create a custom pop-up that does exactly what you're asking.