show the div area in middle on screen using jquery

August 10, 2010 | In: ajax, css, javascript, jquery, web development

If you want to show any div area in the middle on click any link or button then follow these steps:
1. First download and add JQuery js in your file.
2. now create a function

If you want to show any div area in the middle on click any link or button then follow these steps:
1. First download and add JQuery js in your file.
2. now create a function
<pre lang='javascript'>
function showPageOnClick(divId)
{
// divId is an Id of the div
	var WindowHeight = 0;
	var WindowWidth = 0;
 
	// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
	if (typeof window.innerWidth != 'undefined')
	{
		WindowWidth = window.innerWidth,
		WindowHeight = window.innerHeight
	}
 
	// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 
	else if (typeof document.documentElement != 'undefined'
		   && typeof document.documentElement.clientWidth !=
		   'undefined' && document.documentElement.clientWidth != 0 )
	{
	       WindowWidth = document.documentElement.clientWidth,
	       WindowHeight = document.documentElement.clientHeight
	}
 
	// older versions of IE
 
	else
	{
	       WindowWidth = document.getElementsByTagName('body')[0].clientWidth,
	       WindowHeight = document.getElementsByTagName('body')[0].clientHeight
	}
 
 
	// get the middle height using below formula
	var middleHeight = (WindowHeight - jQuery('#'+divId).height()) / 2;
 
	// get the middle width using below formula
	var middleWidth = (WindowWidth - jQuery('#'+divId).width()) / 2;
 
 
	// Now set the css for provided div Id
	jQuery('#'+divId).css( { "left": + middleWidth + "px", "top": + middleHeight + "px", "z-index": "1000", "position": "absolute" } );
 
	// Above code will show the div area in the middle of the screen
	// Below code is useful to show rest screen in black color to hide rest area. 
	var fullHeight = Math.max($(document).height(), $(window).height(), document.documentElement.clientHeight);
 
	var overlayDiv = document.createElement('div');
	var divIdName = 'overlay';
    	overlayDiv.setAttribute('id', divIdName);
	overlayDiv.setAttribute('style', 'height: ' + fullHeight + 'px; width: ' + WindowWidth + 'px; left:0px; top:0px; position:absolute; background-color:#000000; opacity:0.8;');
	overlayDiv.innerHTML = '';
	var mainDiv = document.getElementById('body');
	mainDiv.appendChild(overlayDiv);
}

Download code here: jQuery-popup