jQuery The openOverlay simple overlay and modal jQuery plugin

Latest version on github

This lightweight jQuery overlay plugin allows you to lay or 'overlay' a transparent layer on top of your active window and simultaneously select the HTML elements to appear on top of it, using the conventional jQuery selection syntax.

It's a simple efficient jQuery plugin for opening modal windows, loader images or any content that requires visitors to wait or respond before clicking on other links or elements on the page.

The semi transparent layer is set to respond to window scroll or resize events so that it never fails to cover the full viewport, and thus never allows interaction with anything except for the selected elements that appear on top of it.

You can control color and opacity of the overlay layer by setting values for these in an options object. The layout of the modal content is completely flexible and determined only by the elements selected and their css.

//application example: 
 
$('#simpleExample4').click(function(){
	$(this).openOverlay({sColor:'#ffffff',iOpacity:60});
})

(function($) {
	/* openoverlay v4.9 */
	var $w,$d;
	$.fn.openOverlay = function(options) {
		$w= $(window),$d = $(document)
		var opts = $.extend({}, $.fn.openOverlay.defaults, options),t=0;
		if (options && (options === 'close' || options.close)){
			$.fn.openOverlay.closeOverlay(opts.quickClose);
			return;
		}
 
		if (!$('#overlayLayer').length){
			var occ,i,iLength,
			h = $w.height(),$ol,
			$docbody = $(document.body);  
			if (!h) h=100000;
			$ol = $('<div id="overlayLayer" style="'+
				'text-align:center; z-index:1000; width:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px;'+
				' background:'+opts.sColor+';"></div>')
				.fadeTo(0,'0.' + opts.iOpacity)
				.appendTo($docbody);
 
			$w.bind('scroll.openOverlay',scrollResize)
				.bind('resize.openOverlay',scrollResize);
			$docbody.append('<div id="overlayContentContainer" style="float:left;  position:absolute; top:0; left:0;"></div>');
 
			if (opts.closeOnClick){
				setTimeout(function(){
					$ol.click(function(){
						$.fn.openOverlay.closeOverlay(opts.quickClose);
					});
				},1000)
			}
			fillrUp(1);
		}
		occ = $('#overlayContentContainer');
		iLength = this.length;
		return this.each(function(i) {
			var $b,$c,$this = $(this);
			/* enable content restoration */ 
			if(opts.restoreContent){
				$b = $('<span class="overlayPlaceHolder"></span>');
				$this.after($b);
				$c = $('<div class="overlayPlaceHolder"></div>');
				$c.append(this).data('overlayPlaceHolder',$b);
				occ.append($c);
			}else{
				occ.append(this);
			}
 
			if (i===iLength-1) positionOverlayContent();
		});
 
		function scrollResize(){
			if (t) clearTimeout(t);
			t = setTimeout(function(){
				fillrUp(opts.stickyContent)},100);				
		}
	};
 
	function positionOverlayContent(){
		var o = $('#overlayContentContainer'),
		h = $w.height(),
		ww = $w.width(),
		mtop= (h/2 - o.outerHeight()/2);
		if(!h) h=300;
		if(mtop < 0) mtop = 0; 
		o.css({
			marginTop: mtop + $w.scrollTop() + 'px',
			marginLeft: ww/2  - o.outerWidth()/2 + $w.scrollLeft()+'px',
			left:'0',position:'absolute',zIndex:'1001'
		});
	};
 
	function fillrUp(stickyContent){
		var h = Math.max($d.height(),$w.height());
		$('#overlayLayer').css({height:h+'px'});
		if (stickyContent)
			positionOverlayContent();
	};
 
	$.fn.openOverlay.positionContent = positionOverlayContent;
	$.fn.openOverlay.closeOverlay = function(quickly){
		var $ov,$dt,
		$obj = $('#overlayLayer,#overlayContentContainer'),
		removeit = function(){
			$ov = $(this).find('.overlayPlaceHolder');
			if (this.id === 'overlayContentContainer' && $ov.length){
				$ov.each(function(){
					$dt = $(this).data('overlayPlaceHolder');
					if($dt){
						$dt.replaceWith(this.childNodes[0]);
					}else{
						$(this).remove();
					}
				});
			}
			$(this).remove();
		};
 
		$w.unbind('scroll.openOverlay')
			.unbind('resize.openOverlay');
		if (quickly){
			$obj.each(removeit);
		}else{
			$obj.fadeOut('fast',removeit);
		}
	};
 
	$.fn.openOverlay.defaults = {
			iOpacity:70,
			sColor:'#444444',
			restoreContent:false,
			closeOnClick:false,
			quickClose:true,
			stickyContent:false
	};
})(jQuery);