20-04-2009

jQuery Simple modal window in jquery

--UPDATE:

I made a simple jQuery overlay plugin based on the functions below that you can view here

This is a quick lightweight modal window script with background overlay. It's been tested on Safari 2 and 3, FF 2 and 3 and IE6-8. Needs jQuery to be included

function openOverlay(sHtmlOnTop,iOpacity, sColor){
	if (typeof(sColor)=='undefined') sColor = 'white';
	if (typeof(iOpacity)=='undefined') iOpacity = 80;
	if (typeof(sHtmlOnTop)=='undefined') sHtmlOnTop = '';
 
	function fillrUp(){
		var h = $(window).height();
		var w = $(window).width();
		if (h){
			$('#overlayLayer').height(h + $(window).scrollTop()+20);
			$('#overlayLayer').width(w+$(window).scrollLeft());
		}else{
			window.$('#overlayLayer').css({
				top:$(window).scrollTop()+'px',
				left:$(window).scrollLeft()+'px'
			});
		}
		positionOverlayContent()
	}
 
	function positionOverlayContent(){
		var o = $('#overlayContentContainer');
		var h = $(window).height();
		var w = $(window).width();
		//alert(h);
		if(!h) h=300;
		o.css({
			marginTop: h/2 - o.height()/2 + $(window).scrollTop() + 'px',
			marginLeft: w/2  - o.width()/2 + $(window).scrollLeft()+'px',
			left:'0',
			position:'absolute',
			zIndex:'1001'
		})
 
	}
 
	function closeOverlay(){
		$(window)
			.unbind('scroll',fillrUp)
			.unbind('resize',fillrUp);
			$(this).remove();
			$('#overlayLayer').fadeOut('slow',function(){
				$(this).remove();
			});
	}
 
	if (!$('#overlayLayer').length){
		var h = $(window).height();
		var w = $(window).width();
		if (!h) h=10000;
		$(document.body).append(
			'<div id="overlayLayer" style="'+
			'text-align:center; z-index:1000; position:absolute; top:0px; bottom:0px; left:0px; right:0px;'+
			'opacity: 0.'+iOpacity+';'+
			'-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity='+iOpacity+');'+ 
			'filter: alpha(opacity='+iOpacity+');'+
			'background:'+sColor+';'+
			'width:100%; height:'+h+'px"></div>'); 
		fillrUp();
		$(window)
			.scroll(fillrUp)
			.resize(fillrUp);
		if(sHtmlOnTop.length){
			$(document.body).append('<div id="overlayContentContainer" style="float:left;  position:absolute; top:0; left:0;">'+sHtmlOnTop+'</div>');
 
			/* modal functionalities go here */
			$('#overlayContentContainer').click(closeOverlay); 
			positionOverlayContent();
		}
	}
}

Example below shows modal content triggered by dom ready event. Can off course be triggered by any type of event.

//example usage: (execute on dom ready)
 
 
$(function(){ 
	openOverlay('<div style="background:#ccc">bla bla bla bla bla </div>,70,'#000000')
});
 

Comments:

2 comments.
Your comment:

»
guest 16/10/2009, 4:06 am
where is the demo?
pipo de clown 20/12/2009, 8:09 pm
here:
http://www.hardcode.nl/demos/overlay.html

 

[x]