Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2015 13:57
Show Gist options
  • Save MeesterPaul/9350102 to your computer and use it in GitHub Desktop.
Save MeesterPaul/9350102 to your computer and use it in GitHub Desktop.
A function to display an accessible jqModal overlay (, triggered by scrolling to the end of a particular part of a web page (<div id="followtrigger"> in this case). It aims to have better keyboard accessibility than most similar overlay/popup scripts, as well as being less annoying to the user. The scroll handl…
/* jqModal base Styling courtesy of;
Brice Burgess <> */
/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
the Window's z-index value will be set to 3000 by default (via jqModal.js). */
.jqmWindow {
/* display: none; Normally you want to display:none to avoid a FOUC, but this causes problems if there is a Facebook like button in the overlay (it will not display on some browsers. So, we use visibility:hidden instead and adapt the launch script accordingly */
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
.jqmOverlay { background-color: #000; }
/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
width: expression(this.parentNode.offsetWidth+'px');
height: expression(this.parentNode.offsetHeight+'px');
/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
<title>Overlay Triggered by Scroll Example</title>
<!-- Requires jQuery, jqModal, jquery-cookie -->
<!-- Inspired by -->
<script src="//"></script>
<script src="/path/to/jqModal.js"></script>
<script src="/path/to/jquery.cookie.js"></script>
<script src="/path/to/pageScrollOverlay.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/jqModal.css" />
<div id="followtrigger">
<h1>Your Main Page Content</h1>
<p>Bla bla bla</p>
<div class="jqmWindow" id="dialog">
<p><a href="#" class="jqmClose" id="focusClose">Close</a></p>
<h2>Your Overlay Content</h2>
<p>Bla bla bla</p>
var _throttleTimer = null;
var _throttleDelay = 100;
var $window = jQuery(window);
var $document = jQuery('#followtrigger');
$document.ready(function () {
var thecookie = jQuery.cookie('rp_overlay_follow'); // Check if cookie exists
if(!thecookie) // If it doesn't then attach the scroll handler
.off('scroll', ScrollHandler)
.on('scroll', ScrollHandler);
function ScrollHandler(e) {
//throttle event:
_throttleTimer = setTimeout(function () {
//do work
if ($window.scrollTop() + $window.height() > $document.height() + 100) {
$(window).unbind('scroll'); // Stop the overlay triggering more than once if you scroll up and down again
var lastFocus = jQuery(document.activeElement); // Get position of keyboard focus
jQuery('.jqmWindow').css("visibility", "visible"); // Make the overlay div visible
jQuery('#dialog').jqm({onHide: function(hash){lastFocus.focus();hash.w.fadeOut('2000',function(){ hash.o.remove(); });}}); // set up overaly, including binding event to close action which replaces the keyboard focus where it was before
jQuery('#dialog').jqmShow(); // Show the overlay
jQuery('#focusClose').focus(); // Move keyboard focus to the close link at the top of the overlay
jQuery.cookie('rp_overlay_follow', '1', { expires: 2, path:'/' }); // Set a cookie so the user sees this once every 2 days at most.
}, _throttleDelay);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment