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