Javascript Tricks, Samples, Tutorials & Howtos
/ JTricks.com / Window management / Centered Popup Box
Last updated: 03 Jul 2007
Centered Popup Box
This script will display a centered box with given width and height with the contents of a separate page. It is best suited to display an advertisement, quick site menu or other form of content navigation.

It could be used to display a box upon clicking on a hyperlink or on any other event such as page load.
Script demonstration
Page history . Site map
Script source code
To use the script perform the following steps:

  • Create separate page(s), which will open in separate box(es). Be sure to create all hyperlinks in those pages with target="_top" unless you want to create mini-navigation in those box(es).
  • Be sure to specify background (colour) for these pages, otherwise you would get transparent boxes in some browsers.
  • Insert the following code somewhere on the page (or put in separate file and reference it):
  1. <script type="text/javascript"><!--  
  2. /* Script by: www.jtricks.com 
  3.  * Version: 20070703 
  4.  * Latest version: 
  5.  * www.jtricks.com/javascript/window/box_centered.html 
  6.  */  
  7. var has_inner = typeof(window.innerWidth) == 'number';  
  8. var has_element = document.documentElement  
  9.     && document.documentElement.clientWidth;  
  10.   
  11. // Moves the box object to be centered on current  
  12. // viewable area of the page  
  13. function center_box(box, width, height)  
  14. {  
  15.     cleft = has_inner  
  16.         ? pageXOffset +   
  17.           (window.innerWidth - width)/2  
  18.         : has_element  
  19.           ? document.documentElement.scrollLeft +   
  20.             (document.documentElement.clientWidth - width)/2  
  21.           : document.body.scrollLeft +   
  22.             (document.body.clientWidth - width)/2;  
  23.   
  24.     ctop = has_inner  
  25.         ? pageYOffset + (window.innerHeight - height)/2  
  26.         : has_element  
  27.           ? document.documentElement.scrollTop +   
  28.             (document.documentElement.clientHeight - height)/2  
  29.           : document.body.scrollTop +   
  30.             (document.body.clientHeight - height)/2;  
  31.   
  32.     box.style.left = cleft > 0 ? cleft + 'px' : '0px';  
  33.     box.style.top = ctop > 0 ? ctop + 'px' : '0px';  
  34. }  
  35.   
  36. // Hides other alone popup boxes that might be displayed  
  37. function hide_other_alone(obj)  
  38. {  
  39.     if (!document.getElementsByTagName)  
  40.         return;  
  41.   
  42.     var all_divs = document.body.getElementsByTagName("DIV");  
  43.   
  44.     for (i = 0; i < all_divs.length; i++)  
  45.     {  
  46.         if (all_divs.item(i).style.position != 'absolute' ||  
  47.             all_divs.item(i) == obj ||  
  48.             !all_divs.item(i).alonePopupBox)  
  49.         {  
  50.             continue;  
  51.         }  
  52.   
  53.         all_divs.item(i).style.display = 'none';  
  54.     }  
  55.     return;  
  56. }  
  57.   
  58. // Shows a box if it wasn't shown yet or is hidden  
  59. // or hides it if it is currently shown  
  60. function show_hide_centered_box(an, width, height, borderStyle)  
  61. {  
  62.     show_hide_centered_href(  
  63.         an.href, width, height, borderStyle);  
  64.     return false;  
  65. }  
  66.   
  67. // Shows a box if it wasn't shown yet or is hidden  
  68. // or hides it if it is currently shown  
  69. function show_hide_centered_href(href, width, height, borderStyle)  
  70. {  
  71.     var boxdiv = document.getElementById(href);  
  72.   
  73.     if (boxdiv != null)  
  74.     {  
  75.         if (boxdiv.style.display=='none')  
  76.         {  
  77.             hide_other_alone(boxdiv);  
  78.             // Show existing box, move it  
  79.             // if document changed layout  
  80.             center_box(boxdiv, width, height);  
  81.             boxdiv.style.display='block';  
  82.   
  83.             // Workaround for Konqueror/Safari  
  84.             if (!boxdiv.contents.contentWindow)  
  85.                 boxdiv.contents.src = href;  
  86.         }  
  87.         else  
  88.             // Hide currently shown box.  
  89.             boxdiv.style.display='none';  
  90.         return false;  
  91.     }  
  92.   
  93.     hide_other_alone(null);  
  94.   
  95.     // Create box object through DOM  
  96.     boxdiv = document.createElement('div');  
  97.   
  98.     // Assign id equalling to the document it will show  
  99.     boxdiv.setAttribute('id', href);  
  100.   
  101.     // Add object identification variable  
  102.     boxdiv.alonePopupBox = 1;  
  103.   
  104.     boxdiv.style.display = 'block';  
  105.     boxdiv.style.position = 'absolute';  
  106.     boxdiv.style.width = width + 'px';  
  107.     boxdiv.style.height = height + 'px';  
  108.     boxdiv.style.border = borderStyle;  
  109.     boxdiv.style.textAlign = 'right';  
  110.     boxdiv.style.padding = '4px';  
  111.     boxdiv.style.background = '#FFFFFF';  
  112.     document.body.appendChild(boxdiv);  
  113.   
  114.     var offset = 0;  
  115.   
  116.     // Remove the following code if 'Close' hyperlink  
  117.     // is not needed.  
  118.     var close_href = document.createElement('a');  
  119.     close_href.href = 'javascript:void(0);';  
  120.     close_href.onclick = function()  
  121.     {  
  122.         show_hide_centered_href(href, width, height, borderStyle);  
  123.     }  
  124.   
  125.     close_href.appendChild(document.createTextNode('Close'));  
  126.     boxdiv.appendChild(close_href);  
  127.     offset = close_href.offsetHeight;  
  128.     // End of 'Close' hyperlink code.  
  129.   
  130.     var contents = document.createElement('iframe');  
  131.     //contents.scrolling = 'no';  
  132.     contents.overflowX = 'hidden';  
  133.     contents.overflowY = 'scroll';  
  134.     contents.frameBorder = '0';  
  135.     contents.style.width = width + 'px';  
  136.     contents.style.height = (height - offset) + 'px';  
  137.   
  138.     boxdiv.contents = contents;  
  139.     boxdiv.appendChild(contents);  
  140.   
  141.     center_box(boxdiv, width, height);  
  142.   
  143.     if (contents.contentWindow)  
  144.         contents.contentWindow.document.location.replace(  
  145.             href);  
  146.     else  
  147.         contents.src = href;  
  148.   
  149.     // The script has successfully shown the box,  
  150.     // prevent hyperlink navigation.  
  151.     return;  
  152. }  
  153.   
  154. //--></script>  
  • If Close hyperlink inside the box is not needed, remove the apropriately marked code block.
If you would like to show boxes upon a hyperlink click do the following:

  • Add hyperlinks leading to your separate pages. Add onclick handler to those hyperlinks. The handler should call show_hide_box function with four parameters. The first should always be this. The second is width of the box in pixels, the third - height and the last one - border style. For example:
  1. <a href="box_demo_history.html"  
  2.    onclick="return show_hide_box(this, 200, 270, '2px solid')">  
  3. Page history  
  4. </a>  
If you would like to show a box upon page load do the following:

  • Add the call to show_hide_centered_href(<target page>, <width>, <height>, <border style>) to onload attribute of the BODY tag of your HTML page. For example:
  1. <body  
  2.    onload="show_hide_href('test.html', 200, 200, '2px solid')">  
  • Be sure to verify page design with the Javascript turned off.
Browser compatibility
The javascript snippet above was tested on the following user agents:

Mozilla/Netscape Firefox 2.0.x Ok.
Firefox 1.5 Ok.
Firefox 1.0.x An extra record is inserted into browser history. The browser back button might not work correctly.
Netscape Navigator 4.79 Downgrades gracefully *.
Microsoft Internet Explorer 7.0 Ok.
Internet Explorer 6.0 Ok.
Opera Opera 8.x Ok.
Opera 9.x Ok.
KHTML Konqueror 3.5.5 An extra record is inserted into browser history. The browser back button might not work correctly.
No Javascript or
Javascript turned off
Any Downgrades gracefully *.

*: Graceful degradation means the user agent navigates to target web page instead of showing it in popup box pon hyperlink click and the box just isn't shown for page load if it was specified in onload attribute of BODY tag.
See Also
Absolute Popup Box - If you want to have several boxes visible at the same time appearing under clicked hyperlink.
Donations and Script Rating
If you like our script, please
or at least rate it @ hotscripts.com!