There are situations where it is desirable to pop up some additional information, such as information about page author, a sitemap or an auxiliary menu. But usual popup windows are not up to the task anymore. They might be blocked by browsers and generally are an annoyance to the user.

It is better to show a box with this information directly on the page, partially hiding the page content. The javascript sample on this page helps to achieve that. It borrows some ideas from AJAX technology.

It might be tempting to use the script to create main site menus. The opened content is in separate html files however. This will introduce delays and will make the such menus a nuisance for most users.

Page history . Site map

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:

<script type="text/javascript"><!--
/* Script by: www.jtricks.com
 * Version: 20070301
 * Latest version:
 * www.jtricks.com/javascript/window/box.html
 */
// Moves the box object to be directly beneath an object.
function move_box(an, box)
{
    var cleft = 0;
    var ctop = 0;
    var obj = an;

    while (obj.offsetParent)
    {
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
    }

    box.style.left = cleft + 'px';

    ctop += an.offsetHeight + 8;

    // Handle Internet Explorer body margins,
    // which affect normal document, but not
    // absolute-positioned stuff.
    if (document.body.currentStyle &&
        document.body.currentStyle['marginTop'])
    {
        ctop += parseInt(
            document.body.currentStyle['marginTop']);
    }

    box.style.top = ctop + 'px';
}

// Shows a box if it wasn't shown yet or is hidden
// or hides it if it is currently shown
function show_hide_box(an, width, height, borderStyle)
{
    var href = an.href;
    var boxdiv = document.getElementById(href);

    if (boxdiv != null)
    {
        if (boxdiv.style.display=='none')
        {
            // Show existing box, move it
            // if document changed layout
            move_box(an, boxdiv);
            boxdiv.style.display='block';

            bringToFront(boxdiv);

            // Workaround for Konqueror/Safari
            if (!boxdiv.contents.contentWindow)
                boxdiv.contents.src = href;
        }
        else
            // Hide currently shown box.
            boxdiv.style.display='none';
        return false;
    }

    // Create box object through DOM
    boxdiv = document.createElement('div');

    // Assign id equalling to the document it will show
    boxdiv.setAttribute('id', href);

    boxdiv.style.display = 'block';
    boxdiv.style.position = 'absolute';
    boxdiv.style.width = width + 'px';
    boxdiv.style.height = height + 'px';
    boxdiv.style.border = borderStyle;
    boxdiv.style.textAlign = 'right';
    boxdiv.style.padding = '4px';
    boxdiv.style.background = '#FFFFFF';
    document.body.appendChild(boxdiv);

    var offset = 0;

    // Remove the following code if 'Close' hyperlink
    // is not needed.
    var close_href = document.createElement('a');
    close_href.href = 'javascript:void(0);';
    close_href.onclick = function()
        { show_hide_box(an, width, height, borderStyle); }
    close_href.appendChild(document.createTextNode('Close'));
    boxdiv.appendChild(close_href);
    offset = close_href.offsetHeight;
    // End of 'Close' hyperlink code.

    var contents = document.createElement('iframe');
    //contents.scrolling = 'no';
    contents.overflowX = 'hidden';
    contents.overflowY = 'scroll';
    contents.frameBorder = '0';
    contents.style.width = width + 'px';
    contents.style.height = (height - offset) + 'px';

    boxdiv.contents = contents;
    boxdiv.appendChild(contents);

    move_box(an, boxdiv);

    if (contents.contentWindow)
        contents.contentWindow.document.location.replace(
            href);
    else
        contents.src = href;

    // The script has successfully shown the box,
    // prevent hyperlink navigation.
    return false;
}

function getAbsoluteDivs()
{
    var arr = new Array();
    var all_divs = document.body.getElementsByTagName("DIV");
    var j = 0;

    for (i = 0; i < all_divs.length; i++)
        if (all_divs.item(i).style.position=='absolute')
        {
            arr[j] = all_divs.item(i);
            j++;
        }

    return arr;
}

function bringToFront(obj)
{
    if (!document.getElementsByTagName)
        return;

    var divs = getAbsoluteDivs();
    var max_index = 0;
    var cur_index;

    // Compute the maximal z-index of
    // other absolute-positioned divs
    for (i = 0; i < divs.length; i++)
    {
        var item = divs[i];
        if (item == obj ||
            item.style.zIndex == '')
            continue;

        cur_index = parseInt(item.style.zIndex);
        if (max_index < cur_index)
        {
            max_index = cur_index;
        }
    }

    obj.style.zIndex = max_index + 1;
}

//--></script>

• If Close hyperlink inside the box is not needed, remove the apropriately marked code block.
• 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:

<a href="box_demo_history.html"
   onclick="return show_hide_box(this, 200, 270, '2px solid')">
Page history
</a>

• Be sure to verify page design with the Javascript turned off.

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.0x	Overlapping boxes will have rendering problems. Konqueror displays IFRAME's above all absolutely-positioned DIV's. You might want to design your pages without overlapping boxes. Otherwise you can use (A)lone Popup Box.
	Opera 9.0x	Ok.
KHTML	Konqueror 3.5.5	Konqueror has the same problem as Opera 8.0x.
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. (A)lone Popup Box - If you need only one box to appear at the same time (ie, hide existing box when showing a new one).

If you like our script, please rate it @ hotscripts.com!

Excellent!Very GoodGoodFairPoor