Skip to Content

LeaveNotice is a plug in to easily notify your users that they are leaving your website. This was developed with “official” type websites in mind (Government, money-processing, etc). Because of the nature of the information those sites house, it can be important to make sure users know that they are being linked to a site not under “official” jurisdiction.

See Examples | Download from Github

Features of LeaveNotice

  • Easy to install with just a couple steps.
  • Easy to style using only CSS.

Changelog

v. 1.1.3

  • Added an option to open links in a new window through the dialog. This behavior was possible before through the linkString option, but I have made it more easily available now through a new option called newWindow. Note: The experience this creates is not ideal (it breaks the back button), but I've had enough requests that I've added it.

v. 1.1.2

  • Fixed issue that was caused by a change made in version 1.6 of jQuery that was causing the link titles to be displayed as 'undefined'.

v. 1.1.1

  • The modal is killed on page unload, now, so that users who return to the website via their browser back button will not see the leaveNotice message as they return.

v. 1.1

  • There is now the ability to set the timeOut option to 0, and thus keep leaveNotice from automatically forwarding the user. When timeOut is set to 0, the user will have to click the link from the leaveNotice dialog in order to advance to the linked page.
  • There is a new option that can now be set that is called linkString. This is just a string that gets added to the outgoing link. The purpose of this property is it allows for adding a class or other property to the outgoing link.
  • LeaveNotice now works when jQuery is running in noConflict() mode.

Installation

To install LeaveNotice on your site, there are 2 steps.

1.) Link to jQuery, the plugin javascript file, and the CSS file.

(Note: In order to keep things easy to customize, all formatting is handled with the CSS file. The only “formatting” option that is handled with javascript, is setting the opacity for the “blackout” div. This can be disabled, too, if you prefer using only css.)

Example:

2.) Initiate the plugin with jQuery with the DOM is ready.

Example:

When calling the .leaveNotice() method, you can specify no options if you like. In the notice that is shown to the users, the site URL will be used instead of a site title (e.g. “You are leaving http://www.somewhere.com” as opposed to, “You are leaving Joe’s Good Website”).

While this is okay, I suggest for a minimal installation, specifying at least a site name. This will be a little bit more clear for those using your site.

Here’s an example of specifying a site name:

With the siteName option specified, a user would see, “You are leaving My Cool Site…” instead of seeing the URL.

Other general implementation suggestions

Available Options

Option Value Example Default Value

siteName

Name of your site

string “My Cool Site” Your page URL

exitMessage

message that is shown your visitors to let them know they are leaving

string (HTML) “You have requested to leave {SITENAME}” You have requested a website outside of {SITENAME}.

Thank you for visiting.”

preLinkMessage

the text that comes before the link

string (HTML) “Off you go to {URL}!” “You will now be directed to:

{URL}“

newWindow

Allows the link in the dialog to open in a new window.
Note: This setting automatically sets timeOut to 0 since popup blockes block windows opened automatically by JavaScript.

boolean true false

linkString

A simple string that is added to the outgoing link.

string “class=’bold-style’” “” /

timeOut

The length of time the dialog is shown before the user is linked to the page they are trying to access.

Setting to '0' will disable the auto redirect and make it so the user has to explicitly click the link.

integer (number of milliseconds) 5725 4000 (4 seconds)

overlayId

the ID given to the div that acts as a page blackout

string “cloak” “ln-blackout”

messageBoxId

the ID given to the dialog box div that holds the message shown to users

string “message” “ln-messageBox”

messageHolderId

the ID given to the div that holds the message box div

string “bottle” “ln-messageHolder”

overlayAlpha*

the opacity of the blackout div

integer 0.6 0.3

Styling

All of the styling (except the blackout transparency) is done with the CSS file.

If you are trying to restyle the dialogs, it might be helpful to know the exact HTML markup generated by the plugin. This is what it looks like:

The part of the code in curly brackets can be customized through the options. All of the IDs can be set in the options, as well. Other structure is coded. You should be able to adjust almost any details of how the dialogs appear using CSS.

I have commented the CSS file so if you want more information, take a peek at that.

A little note, if you want your dialog to look more graphical, try using a background image to give it a header. This sort style can be seen at whitehouse.gov (Click an external link to see it. There’s on at the very bottom of the page to usa.gov). They place the Whitehouse.gov logo in the top. I think it looks nice, and for an real-life implementation, I would probably use this technique.

Notes/Common Questions

Hooks

For the messages shown to users, alertMessage and preLinkMessage, there is an option to include hooks in your messages. The two hooks available are {SITENAME} and {URL}. {SITENAME} will be replaced with whatever you specify in the siteName option, and {URL} will be replaced with the URL of the link that was clicked.

View the examples to see this in action.


General Implementation Suggestions

In the example, you will see I used for a selector $("a[rel=external]"). This will target links that have the rel attribute set to “external”.

Previously, in my examples, I used for the selector $("a[target=_blank]"), which might be a more universally applicable implementation, but it was pointed out to me that target=”_blank” is invalid in xhtml strict and maybe also in other versions so I have changed in order to comply with those standards. (Thanks, Daniel)

In your specific implementation, you may choose to use target=_blank or a different, more suitable selector based on how your site is built, but that is, of course, up to you.

Bonus: There is another plugin called utlInternal that might be of interest for those of you wanting to select all outgoing links: jQuery urlInternal


Note About the overlayAlpha Option

For this plugin, I wanted to keep all the styling and behavior separate. In thinking about it, though, with the inconsistencies in CSS support in different browsers (specifically the lack of support for setting alpha in an easy way for everyone), I thought it would be much easier for now to let javascript do it.

Right now, the opacity of the blackout div is set, then, with javascript. This can be disabled, though, by setting the opacityAlpha option to false. In the future, I might change the default setting to false and let the implementers set it to be on if they want it, but for now this is easier.

Tags: