Hi I would like to customize my pop up for leaving a page, is there any simple way to do that?
I am using simple jQuery
$(document).ready(function() { var myPopUp = $('#pop-up').css('display', 'block'); $(window).bind('beforeunload', function(){ return 'load my pop up here instead of the default browser message'; }); });
my html for the pop up is which is hidden by default
<div id="pop-up"> <h2>Are you sure wanna leave</h2> <a href="#">Leave</a> <a href="#" class="close">Stay</a> </div>
Thanks
You can't set a custom message on a modern browser instead you can use of default alert function. Save this answer. Show activity on this post. Save this answer.
The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point. This event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page.
Short answer: You can't.
Longer answer: For rather obvious "security" reasons it is very limited what you can do when a user tries to navigate away from a page / close a tab or in any other way leave the site.
The reason is that browsers want to make absolutely sure that you cannot prevent the user from closing a tab or window that he / she wants to close.
Therefore the onbeforeunload
javascript event - and by extension the beforeunload
jQuery event - are extremely limited in what they can do. One of the things they definitely cannot do is prevent the page from closing - except using one very standardized and rather boring method the browser (usually) allows.
Some browsers allow you to specify a message, while others (including firefox) do not even allow you to change the message (because you might trick the user by asking "Can I adopt your unborn son?")... AFAIK most browsers allow you to specify a string of your choosing in addition to a standard message that cannot be changed. Some browsers (no major desktop browsers) even lack the event completely.
What you want to achieve is basically to force the user to stay on your page, and then show a nice pop-up asking them to confirm... and while this could definitely improve the user experience in a lot of cases, you don't have to think very hard to imagine how it could be abused to simply not allow the user to ever leave.
Think about how annoying sites that break the back-button are, then imagine they could even remove your ability to close a tab!
I stumbled on this rather amusing forum question from a user who has spent an extensive amount of time trying to prevent even what little annoyance can be added - a short excerpt:
I do not like onunload and onbeforeunload. I do not think they should EVER be fired on my firefox installation. I do not think there is any useful application of these events, not even the benevloent "you have unsaved work!" popups. When I tell my web browser to close a web page, I do not want a web page to prevent (or delay) the browser from closing it--at all ever.
And just to add a little bit of somewhat official information:
mozilla.org: WindowEventHandlers.onbeforeunload:
Since 25 May 2011, the HTML5 specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event. See the HTML5 specification for more details.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With