Display a modal dialog box on an opacity overlay with scroll height calculated

From Code Trash
Jump to: navigation, search
.modalOverLay { position: absolute; z-index:125; top: 0px; left: 0px; height: 1250px; width: 100%; background: #000000; display: none; }


$(document).ready(function() {
        $(document.body).prepend('<div class="modalOverLay"></div>');
        $('.modalOverLay').css({ opacity: 0.7, width: '100%', height: getscrollheight() });
});
 
function getscrollheight(){
     var D = document;
     return Math.max(Math.max(D.body.scrollHeight,D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, 
 
D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
 
 
function jlightbox()
{
	$('.modalOverLay').fadeIn('slow');
	$('#modalOverLay').css({opacity:0.7});  	
	$('#cpic').css({
		position: 'absolute',
		left: $(document).width()/2 - $('#cpic').width()/2,
		top: getscrollheight()/2 - $('#cpic').height()/2
	});
 
	$('#cpic').fadeIn(500)	
}

The about will not display with respect to the scroll height but with document height...

below is the one which will display calculating the scroll height that is the modal window will open in the current view port not with respect to the client width

function jlightbox()
{
	$('.modalOverLay').fadeIn('slow');
	$('#modalOverLay').css({opacity:0.7});  	
	$('#cpic').css({
		position: 'absolute',
		left: $(document).width()/2 - $('#cpic').width()/2,
		top: $(document).scrollTop() + 100
	});
 
	$('#cpic').fadeIn(500)	
}