I want to implement a custom confirmation pop-up (that does not look like a JS alert) when user tries to close the tab or window. I have checked many similar questions already and all the solutions are really old, where customizing the text on this pop-up is now deprecated for all the modern browsers.
I have below code working with default JS alert type message, but is it anyway possible to customize this? Please suggest.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<title>Leave Site Pop-up</title>
<body>
<h1>My First Heading</h1>
<input name="name" id="name"/>
<script type="text/javascript">
const beforeUnloadListener = (event) => {
event.preventDefault();
return event.returnValue = "Are you sure you want to exit?";
};
const nameInput = document.querySelector("#name");
nameInput.addEventListener("input", (event) => {
if (event.target.value !== "") {
addEventListener("beforeunload", beforeUnloadListener, {capture: true});
} else {
removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
}
});
</script>
</body>
</html>
There's no way to show a custom warning for this particular interaction, for security reasons.
Scam websites abused the functionality to try and scare people into staying there for longer, to the point where browser vendors even had to remove the ability to customise the prompt message. You definitely can't show your own style of alert / modal --- imagine if those sorts of websites opted into doing that, and then just showed nothing: you'd be effectively trapped on the site with no way to exit it.
Honestly, there's not really much point to customising this anyway --- for a lot of users, it makes sense that the tab closing UI is part of their browser, not your site. It would probably be more useful to spend time building some sort of save mechanism, so that if people do close the site, you can take them back to exactly where they left off when they come back. You can do this in beforeUnload, using the localStorage / navigator.beacon APIs (depending on where you want to store the data).
Here's a few ideas:
If you want to show a custom alert box / show your own custom html popup AFTER the default confirmation popup, you can do this: (In this example I made an alert box with the text hi!)
const beforeUnloadListener = (event) => {
setTimeout(() => alert('hi!'));
event.preventDefault();
return event.returnValue = "Are you sure you want to exit?";
};
If you want to show an alert box / show your own custom html popup BEFORE the use even presses the close tab button, you can show a box whenever the mouse leaves the html document:
const mouseLeaveListener = (event) => {
alert('Where are you going?');
};
document.addEventListener('mouseleave', mouseLeaveListener);