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

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
egoselfaxisAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

themrrobertCommented:
change the body tag to

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


0
leakim971PluritechnicianCommented:
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
egoselfaxisAuthor Commented:
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
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

leakim971PluritechnicianCommented:
0
egoselfaxisAuthor Commented:
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
leakim971PluritechnicianCommented:
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
egoselfaxisAuthor Commented:
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
leakim971PluritechnicianCommented:
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
egoselfaxisAuthor Commented:
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
leakim971PluritechnicianCommented:
>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
egoselfaxisAuthor Commented:
I'm not sure I follow.  Can you please provide me with a jquery example?

- yg
0
leakim971PluritechnicianCommented:
$("a").each( function (i) {
     if ( this.attr("href").indexOf("http://") == 0 ) {
         // exit=false
     }
}
0
egoselfaxisAuthor Commented:
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
leakim971PluritechnicianCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
egoselfaxisAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.