show the div area in middle on screen using jquery

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
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

  Tweet This Post