Accessible Scroll-triggered Modal Overlay using jQuery

(or “How to put a visually disruptive overlay in front of your users without annoying them so much they instantly leave your site”)

This is the techie companion post to our discussion on visually disruptive overlays AKA “those irritating pop-up things that seem to be everywhere nowadays”. It gives the technique we use on the Refined Practice site to display an overlay in a manner that is keyboard accessible, effective and (vitally) less annoying than most similar techniques.

Our overlay is triggered when the user scrolls beyond a certain point on a page (i.e. when they have finished reading an article).  It also cookies the user to ensure they only see the overlay a maximum of once every 2 days. When it is opened it moves the keyboard focus to the top of the overlay and then replaces it where it was before on close, thus making it easier to use for keyboard-only users.

We chose to use a couple of jQuery modules to make this easier to implement, as we use jQuery on the site anyway. So, it requires jQuery, jqModal (http://jquery.iceburg.net/jqModal/) and jquery-cookie https://github.com/carhartl/jquery-cookie. The scrolling code was adapted from ideas found here http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom

Enough chat! The example code is below, or you can view it directly on Gist here.