NIST fork of LeaveNotice jQuery Plugin

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.

NIST notes

This fork of the original (upstream) plugin has been updated with NIST-specific default messages and instructions for use. This fork has been updated to support versions 1.4 <= jQuery <= 3.x and newer 3.x versions will probably continue to work.

NIST Notes on Performance

You should load jQuery and plugins with the defer parameter in the script tag, but this will not work if you have an inline script (as in the examples below) that depends on the deferred scripts. Solution: load the ready script with "src=URL defer" parameters rather than inlining it.

Examples

See Examples

Features of LeaveNotice

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

Changelog

Version 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.

Version 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'.

Version 1.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.
In 1.1.1, on page unload, the modal is killed so that users who return to the website via their browser back button will not see the leave notice as they return.

Installation

To use the NIST version of 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:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://pages.nist.gov/leaveNotice/js/jquery.leaveNotice-nist.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://pages.nist.gov/leaveNotice/css/jquery.leaveNotice.css" />

2.) Instantiate the plugin with a jQuery ready script.

Example: add leaveNotice handler to links tagged with rel="external" parameters:

<script type="text/javascript">
$(function(){
	$('a[rel=external]').leaveNotice();
});
</script>

Example: add leaveNotice handler to ALL non-relative, non-NIST links (no manual tagging needed):

<script type="text/javascript">
$(document).ready(function(){
  // Mark external (non-nist.gov) A tags with class "external"
  //If the adress start with https and ends with nist.gov
  var re_nist = new RegExp('^https?:\/\/((^\/)*\.)*nist\\.gov(\/|$)'); 
  //Regex to find address that start with https 
  var re_absolute_address = new RegExp('^((https?:)?\/\/)');
  $("a").each(function(){
    var url=$(this).attr('href'); 
    if(re_nist.test(url) || !re_absolute_address.test(url)){
      $(this).addClass('local'); 
    }else{
      $(this).addClass('external');
    } 
  });
  // Add leaveNotice to external A elements 
  $('a.external').leaveNotice({
    siteName: 'the NIST fork of the leaveNotice jQuery plugin',
  });
});
</script>

When calling the .leaveNotice() method, you can specify no options if you like. In the notice that is shown to the users, the site name of "NIST" will be used instead of a site title (e.g. "You are leaving NIST" 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 specifying a more specific site name:

<script type="text/javascript">
$(function(){
	$('a[rel=external]').leaveNotice({
		siteName: 'My Cool NIST Site'
	});
});
</script>

With the siteName option specified a user would see "You are leaving My Cool NIST Site..." instead of seeing just "NIST".

Other general implementation suggestions

Available Options

Option	Value	Example	Default Value
`siteName` Name of your site	string	"My Cool Site"	"NIST"
`exitMessage` message that is shown your visitors to let them know they are leaving	string (HTML)	"<p>You have requested to leave {SITENAME}</p>"	"<h2><strong>Thank you for visiting {SITENAME}.</strong></h2><p>We hope your visit was informative.</p><p>We have provided a link to this site because it has information that may be of interest to our users. NIST does not necessarily endorse the views expressed or the facts presented on this site. Further, NIST does not endorse any commercial products that may be advertised or available on this site.</p>"
`preLinkMessage` the text that comes before the link	string (HTML)	"<p>Off you go to {URL}!</p>"	"<div class='setoff'><p>You will now be directed to:<br/>{URL}</p></div> "
`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'"	"" / <empty>
`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	10000 (10 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 <= 1	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:

<div id="ln-blackout"></div>
<div id="ln-messageHolder">
	<div id="ln-messageBox">
		<p><strong>You have requested a website outside of {SITENAME}.</strong></p>
		<p>Thank you for visiting.</p>
		<div class="setoff">
			<p>You will now be directed to:<br><a href="{URL}">{URL}</a></p>
		</div>
		<p id="ln-cancelMessage"><a href="#close" id="ln-cancelLink">Cancel</a> or press the ESC key.</p>
	</div>
</div>

The part of the code that is hilighted in yellow is markup that can be customized in 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.

If you have thoughts on this, I'd be interested to hear what you think. (You can let me know at my website).

Top

LeaveNotice jQuery Plugin v 1.1.3

(Forked into NIST Pages with NIST defaults for use in NIST websites)