MeesterPaul/jqModal.css

## jqModal.css
/* jqModal base Styling courtesy of;
	Brice Burgess <bhb@iceburg.net> */

/* 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 */

    visibility:hidden;

    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');
}

## pageScrollOverlay.html
<html>
  <head>
    <title>Overlay Triggered by Scroll Example</title>
    <!-- Requires jQuery, jqModal http://jquery.iceburg.net/jqModal/, jquery-cookie https://github.com/carhartl/jquery-cookie -->
    <!-- Inspired by http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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" />
  </head>
  <body>
    <div id="followtrigger">
      <h1>Your Main Page Content</h1>
      <p>Bla bla bla</p>
    </div>
    <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>
    </div>
  </body>
</html>

## pageScrollOverlay.js
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
   {
    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);
   }
});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _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);
}
	/* jqModal base Styling courtesy of;
	Brice Burgess <bhb@iceburg.net> */

	/* 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 */

	visibility:hidden;

	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');
	}
	<html>
	<head>
	<title>Overlay Triggered by Scroll Example</title>
	<!-- Requires jQuery, jqModal http://jquery.iceburg.net/jqModal/, jquery-cookie https://github.com/carhartl/jquery-cookie -->
	<!-- Inspired by http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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" />
	</head>
	<body>
	<div id="followtrigger">
	<h1>Your Main Page Content</h1>
	<p>Bla bla bla</p>
	</div>
	<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>
	</div>
	</body>
	</html>
	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
	{
	$window
	.off('scroll', ScrollHandler)
	.on('scroll', ScrollHandler);
	}
	});

	function ScrollHandler(e) {
	//throttle event:
	clearTimeout(_throttleTimer);
	_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);
	}