Exit Modal Prototype

The purpose:
To notify a user that they have clicked on an outbound link that will take them away from the safety of the current domain. Users will have to acknowledge and confirm the action before being redirected to the external link.

 

Requirements:
  • Apply the functionality only to relevant links programmatically without content publisher intervention
  • Allow the exclusion of an outbound link using an exclusion class (.exclude)
  • Allow inclusion of an internal link using an inclusion class (.acknowledge)
  • Allow exclusion of links based on a configurable white-list of "trusted" websites that will not require the notification - this can include partner websites, applications on other domains, OpenForms, etc...)

 

Accessibility

  • The modal should move and trap the focus in the modal HTML
  • Keyboard navigation and selection must work correctly
  • Closing modal can be achieved by clicking cancel button (mouse or enter key), pressing escape key, or clicking overlay outside the modal body

 

Google Yahoo Service Finder Prototype Home (included) Google (excluded)

 

Additional OC Redirect testing (using acknowledge global list)

Internal link 1 - part of acknowledge list

Internal link 2 - not added to list

Internal link 3 - part of acknowledge list

Internal link 4 - part of acknowledge list

White list link - openforms.com (should be excluded)

Script Logic

On page load, the script checks all anchor tags (links) with an "href" attribute. It checks several conditions to make sure actions are only performed on relevant links.

Relevant links = links with an href attribute outside the current domain

To reduce the amount of links that need to be processed the logic runs in the following order:

  • only target <a> tags with an href attribute - this removes mailtos, tabs, accordions, etc...
  • checks for indexOf "http" which removes relative links from processing
  • checks that the link is pointing outside the current domain
  • checks that the link does NOT have the exclusion class
  • finally, checks against a white list array - this is the most intensive process so we only want to do this on qualified links
  • if a link meets all the criteria it has a class added to the link which will trigger the exit modal

 

Prototype technical details:

The prototype is self contained in an embed code. The embed code should be added to pages where the functionality is desired. In a sitewide implementation the code should be distributed into a footer device variable, client.scss file, and plugins.js file.

The prototype has a dependency on micromodal.js (included) which is very lightweight and handles accessibility out of the box. It's written in pure JS so there are no framework dependencies.

The script has a console timer which logs the number of links processed, links modified and the total time the operation took.

  • total time for link processing is usually between 1.5ms - 5ms depending on how many page links exist
  • total links processed - based on how many links exist on a page
  • links modified - total qualified links found where a class was added.

 

Back to top