?
Solved

Need to add javascript-based Exit popup to website -- what's the best approach?

Posted on 2010-03-29
17
Medium Priority
?
288 Views
Last Modified: 2013-11-19
I need to add a javascript-based exit popup to a website that I maintain.   The ones that I've used in the past require that I append onclick="exit=false" to every internal hyperlink within the site, which can be quite cumbersome.  Is there any way around that?  In other words, .. is there a better way for me to implement an exit popup to a website that DOESN'T require that I attach onclick="exit=false" to every internal link on the site?  Please advise.

Thanks,
- Yvan
0
Comment
Question by:egoselfaxis
  • 7
  • 7
15 Comments
 
LVL 13

Expert Comment

by:themrrobert
ID: 29019783
change the body tag to

<body onBeforeUnload="return confirm('Are you sure you want to leave?');">


0
 
LVL 83

Expert Comment

by:leakim971
ID: 29020491
Hello egoselfaxis,

Ready to learn ? Read : http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript

Regards.

So :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
	window.onbeforeunload = function () {
	   return "You have not saved your document yet.  If you continue, your work will not be saved."
	}
</script>
</head>
<body>
<a href="http://www.experts-exchange.com">Experts Exchange</a><br />
<a href="http://www.google.com">Google</a>
</body>
</html>

Open in new window

0
 

Author Comment

by:egoselfaxis
ID: 29097097
Hmm ... what if I wanted to prompt the user with a link to take them to a specific url?  

"Before you go, ... are you sure you wouldn't like to first visit our facebook page?  If so click OK"

Is that possible?  If so, how?

- yg
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 83

Expert Comment

by:leakim971
ID: 29098145
0
 

Author Comment

by:egoselfaxis
ID: 29212564
The examples that have been highlighted so far do not address the specific problem that I initially posted about, .. more specifically ...

Is there a better way for me to implement an exit popup to a website that DOESN'T require that I attach onclick="exit=false" to every internal link on the site?  

My exit popup script has to be added to every page of the website, and I'm trying to avoid having to update all of the internal links if I can help it, ... since there are lots of them. Please advise.

- Yvan
0
 
LVL 83

Expert Comment

by:leakim971
ID: 29215647
Try the following in code snippet :

(as you can see no onclick="exit=false" on the link)

If you want an other modal box with custom button check this link for example : http://deseloper.org/read/2008/04/a-simple-modal/
You can found a lot on Google
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$("a").bind("click", function() {
			answer = confirm("Are you sure you want to go to : " + this.href + "\nClick cancel to go on our facebook page ?\n");
			if(answer) {
				return true;
			}
			else {
				document.location.href = "http://www.facebook.com";
				return false;
			}
		});
	});
</script>
</head>
<body>
    <a href="http://www.google.com">Google</a><br />
    <a href="http://www.experts-exchange.com">Experts Exchange</a>
</body>
</html>

Open in new window

0
 

Author Comment

by:egoselfaxis
ID: 29216939
You don't understand.  

I don't want to spawn the popup every time a person clicks on an internal link.

I only want the popup to be displayed when he person clicks on an external link, or tries to type in and visit a different domain.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 29217904
OK, just say you want to know if the user go on another website.
To do this you need to know what is the next page and it's not possible for a browser that respect privacy of the user. I don't know any browser that allow that today.
0
 

Author Comment

by:egoselfaxis
ID: 29369880
I see .. good point.  

So, .. what you're saying is that the onclick="exit=false" DOES in fact need to be attached to all internal links in order to suppress the popups ,... correct?

With your example code, .. would I need to attach onclick="exit=false" to all of the internal links?  
Or would I need to attach a different kind of function to all of the internal links? If so -- what?

Thanks,
- Yvan
0
 
LVL 83

Expert Comment

by:leakim971
ID: 29370384
>onclick="exit=false" DOES in fact need to be attached to all internal links in order to suppress the popups ,... correct?

No with a global jquery function you can check all your internal link an set it automatically

Simply task if you can confirm no one of your internal links start by : "http://"
0
 

Author Comment

by:egoselfaxis
ID: 30038884
I'm not sure I follow.  Can you please provide me with a jquery example?

- yg
0
 
LVL 83

Expert Comment

by:leakim971
ID: 30044520
$("a").each( function (i) {
     if ( this.attr("href").indexOf("http://") == 0 ) {
         // exit=false
     }
}
0
 

Author Comment

by:egoselfaxis
ID: 30124272
I think I understand what you're trying to show me, but I can't seem to figure out how to work in your function that's supposed to check for the internal links.  Here's what I have so far (I re-worked the example so that it works in the opposite, .. where you have to click on the "OK" button in order to proceed to the facebook page):

-----------------------------------------------------------------------------------

        $(document).ready(function() {
                $("a").bind("click", function() {                              
                        answer = confirm("Are you sure you wouldn't like to visit our Facebook page before you leave?\n");
                        if(answer) {
                                document.location.href = "http://www.facebook.com/pages/Miami/Harrison-Crane-Service/222776190641?ref=search&sid=1048623567.1916819466..1";
                                return false;
                        }
                        else {                                                
                                                return true;
                        }
                              
                });
        });            

-----------------------------------------------------------------------------------

How can I update the above function so that the exit popup is suppressed when the link that's being clicked on contains an "http://" prefix ?    

Like I said, I tried to integrate the most recent example you've provided, but didn't have much luck.

Thanks,
- Yvan

0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 30131792
The following work for me :

(You should modify your question from the confirm box)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function() {
	$("a").each( function (i) {
		if( $(this).attr("href").indexOf("http://") == 0 ) {
			$(this).bind("click", function() {
				answer = confirm("Are you sure you wouldn't like to visit our Facebook page before you leave?\n");
				if(answer) {
					document.location.href = "http://www.facebook.com/pages/Miami/Harrison-Crane-Service/222776190641?ref=search&amp;sid=1048623567.1916819466..1";
					return false;
				}
				else {                                                
					return true;
				}
			});
		}
	})
});
</script>
</head>
<body>
<a href="http://www.experts-exchange.com">Experts Exchange</a><br />
<a href="http://www.google.com">Google</a><br />
<a href="#">Internal link 1</a><br />
<a href="#">Internal link 2</a>
</body>
</html>

Open in new window

0
 

Author Comment

by:egoselfaxis
ID: 30134078
You're right about your updated script working (thank you).  

However, .. I just noticed that this script doesn't handle situations where the user types in a different url and hits enter, .. or when they pull up a link from their favorites/bookmarks.

Can this script be adapted somehow to handle those situations?  If so, how?

- Yvan



0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question