Display custom error message when user clicks back button in the browser

vbhargav80
vbhargav80 used Ask the Experts™
on
Dear experts,

I am trying to use beforeunload event of the browser to try and see if a user is using the back button to navigate away from a page. My problem is that if that the popup message is not completely customisable. I am attaching the default popup that javascript gives. Only a part of the message is customisable.

I have seen something similar on gmail but fully customisable. Screenshot attached (custom.png). How can I achieve what gmail has done?

Please help

Default.png
Custom.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
Hello vbhargav80,

You need to override the default alert box : http://slayeroffice.com/code/custom_alert/

Regards
Michel PlungjanIT Expert
Top Expert 2009

Commented:
It is not an alert. It is a confirm

But perhaps the same can be done
IT Expert
Top Expert 2009
Commented:
Nope.
Different animal

<script>
window.confirm=function(txt) {
  alert("!!!"+txt);
}

window.onbeforeunload=function() {
  return "noooo don't gooo"
}
</script>
<a href="http://google.com">leave this site</a>


Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Michel PlungjanIT Expert
Top Expert 2009

Commented:
leakim971Multitechnician
Top Expert 2014

Commented:
>It is not an alert. It is a confirm
@mplungjan you right, I saw that after posted and did same conclusion : << But perhaps the same can be done >>

>Different animal
:o(

Thanks for sharing your link.


leakim971Multitechnician
Top Expert 2014

Commented:
vbhargav80,

You have two distinct message, when you left a mail :
One when you click on a link in the webmail itself : a confirm box called by onclick event
One when you left the page with the browser navigation (new url or back button) : onbeforeunload event

It's not the same modal box onclick and onbeforunload but

From the link suggested by mplungjan :

to test it : open the page and paste a new url in the browser, you will see the message as google show it with the same modal box.
 



<html>
<head>
<script language="javascript">
	window.onbeforeunload = function () {
		return "Your message has not been sent.\nDiscard your message?";
	}
</script>
</head>
<body></body></html>

Open in new window

Author

Commented:
Excellent! This UI does not work in chrome so i could not see the grading options. My grading is 100% though.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial