--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') });
http://www.hardcode.nl/demos/overlay.html