Chapter 79. Displaying a "You Are Now Leaving" Popup Here's a little trick that you might find useful: displaying a "You Are Now Leaving" popup when the visitor clicks an external link. As a site designer, you go to great pains to establish the placeness of your Web site. You want it to feel like a logical, unified physical space, like a house with many rooms. While your visitors remain on your site, a consistent graphic design from page to page to page promotes this sense of place nicely. But the pages of a Web site aren't exactly like the rooms of a house. For one thing, your visitors can leave from any room, not just through the ones with the front and back doors, and, once they leave, they can go literally anywhere. This is the legendary nonlinearity of the Web. When your external links are recognizable as such, the jarring teleportation from one house to another across the world is less disorienting. Your visitors are less likely to feel like they're lost. But when the peculiars of your site make it difficult to separate external links from internal links, you might consider giving your visitors a fair warning. Tell them that they're now leaving your site when they click an external link. Give them the opportunity to cancel if they don't want to leave. A simple JavaScript function, like the one in this topic's Toolkit, does the job.  | TOOL KIT"You Are Now Leaving" Popup Add this short JavaScript function to any page that contains an external link. [View full width] <script language="JavaScript"> /* If you're adding this function to an external JavaScript file,  you don't need the script tags. */ function doYouAreNowLeaving(url) { /* The entire function consists of a single if/then block. The browser displays a confirm popup, which contains OK and Cancel buttons. (Feel free to change the wording of the message.) If the visitor clicks OK, the browser goes to the URL that it receives from the link that calls the script. If the visitor clicks Cancel , the script simply ends, and the browser remains on the current page. */ if (confirm("You are now leaving the current site. Click OK to proceed.")) { location.href = url; } } </script>
To make the function work, you must format your external links differently than your internal links. External links need to look like this: [View full width] <a href="javascript:doYouAreNowLeaving(src);">External Link Text Goes Here</a>
Replace src with the full Web address (including the http://www part) of the external site, and of course add your own link text. If you don't like using JavaScript links because of compatibility problems with older browsers, the following link format works also: [View full width] <a href="#" onClick="doYouAreNowLeaving(src);">External Link Text Goes Here</a>
Again, replace src with the full Web address of the external site. |
|
TIP To open the external link in a new browser window, don't add target="_blank" to the link's anchor tag. It won't work in this particular scenario, since the link technically goes to a JavaScript, not to a Web site. Instead, change the following line in the doYouAreNowLeaving(url) function: location.href = url;
to: open(url);
|
|
