I am new to react and im trying to trigger my own custom dialog component on tab/window close event.
I’ve checked everywhere and see that the usage of beforeunload is exactly what is needed to achieve this. However, when I add the beforeunload event listener, I see the browsers default leave site popup and only if I chose cancel on the dialog, then I see my custom dialog pop up appear.
can someone help me to achieve this functionality?
2
Answers
For security reasons, modern browsers don’t allow completely custom dialogs to replace their built-in dialogs. The built-in dialog will always appear first, and if the user chooses to stay on the page, you can then show your custom dialog.
No, this is not possible. For rather obvious reasons, a browser does not allow any webpage to prevent getting closed. The builtin dialog requestable via
beforeunload
is the best you will get, only this way the browser can guarantee that the dialog actually gives the user a choice to close the page.