While Absolute Popup Box will be suitable for most situations where you need to display a popup-like box to show some additional information, such as page author bio, a sitemap or an auxiliary menu, sometimes you might want to hide all other popup boxes open on the page. In this case the script on this page is for you.

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 (or put in separate file and reference it):

<script type="text/javascript"><!--
/* Script by: www.jtricks.com
 * Version: 20070301
 * Latest version:
 * www.jtricks.com/javascript/window/box_alone.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';
}

// Hides other alone popup boxes that might be displayed
function hide_other_alone(obj)
{
    if (!document.getElementsByTagName)
        return;

    var all_divs = document.body.getElementsByTagName("DIV");

    for (i = 0; i < all_divs.length; i++)
    {
        if (all_divs.item(i).style.position != 'absolute' ||
            all_divs.item(i) == obj ||
            !all_divs.item(i).alonePopupBox)
        {
            continue;
        }

        all_divs.item(i).style.display = 'none';
    }
    return;
}

// 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')
        {
            hide_other_alone(boxdiv);
            // Show existing box, move it
            // if document changed layout
            move_box(an, boxdiv);
            boxdiv.style.display='block';

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

    hide_other_alone(null);

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

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

    // Add object identification variable
    boxdiv.alonePopupBox = 1;

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

//--></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.01	Ok.
	Opera 9.0x	Ok.
KHTML	Konqueror 3.5.5	Ok.
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. Absolute Popup Box - If you want to have several boxes visible at the same time.

If you like our script, please or at least rate it @ hotscripts.com! Excellent!Very GoodGoodFairPoor