Working with Windows: Creating a Popup Window

Working with Windows

Creating a Popup Window

Internet Explorer 5.5 supports a new method of the window object, createPopup(). You create a popup window as follows:

var popupObj = window.createPopup();

The popup window is not displayed when you create this object. You have to call its show method:

popupObj.show(yOffset, xOffset, width, height, referenceObj)

where:

yOffset is the horizontal offset of the popup window with respect to the top left corner of the screen.
xOffset is the vertical offset of the popup window with respect to the top left corner of the screen.
width is the popup window's width
height is the popup window's height
referenceObj is an optional parameter that replaces the top left corner of the screen as a reference point to yOffset and xOffset above.

Let's demonstrate the usage of the new popup window. If you click the following link , a menu of all this tutorial pages will pop up. Notice that the this page scrolls back to its top once the menu pops up. How do we implement this popup window? First, you need to define an invisible menu that later will be loaded into the popup menu. To accomplish the hidden links, just position the menu in a a hidden place. We chose the point (-1000, -1000) and specify it in the menu's STYLE tag (somewhere in the HEAD section):

<STYLE>
  .menu {position: absolute; top: -1000; left: -1000}
</STYLE>

We implemented the menu as a table of links:

<TABLE CLASS=menuID=submenu>
  <TR><TD NOWRAP>
    <A HREF="names.html" TARGET="CONTENT">How to name your windows and frames</A>
  </TD></TR>
  <TR><TD NOWRAP>
    <A HREF="open.html">How to open a new window</A>
  </TD></TR>
  <TR><TD NOWRAP>
    <A HREF="features.html">How to specify the features of a new window</A>
  </TD></TR>
    <TR><TD NOWRAP>
    <A HREF="utilize.html">How to utilize the window features</A>
  </TD></TR>
  <TR><TD NOWRAP>
    <A HREF="exist.html">How to check if a window exists</A>
  </TD></TR>
  <TR><TD NOWRAP>
    <A HREF="reference.html">How to close a window</A>
  </TD></TR>
  <TR><TD NOWRAP>
    <A HREF="manipulate.html">How to manipulate a window</A>
  </TD></TR>
  <TR><TD NOWRAP>
    <A HREF="write.html">How to write content to a window</A>
  </TD></TR>
  <TR><TD NOWRAP>
    <A HREF="opener.html">How to reference the opener</A>
  </TD></TR>
  <TR><TD NOWRAP>
    <A HREF="dialog.html">How to create a dialog box</A>
  </TD></TR>
  <TR><TD NOWRAP>
    <A HREF="popup.html">How to create a pop-up window</A>
  </TD></TR>
  <TR><TD></TD></TR>
</TABLE>

The link itself (Tutorial's Pages) does not change the URL but rather calls the showMenu() function when clicked:

<A HREF='#' ONCLICK='showMenu(this, submenu)'>Tutorial's Pages</A>

The showMenu() function takes two parameters: the link object that called the function (this) and the ID of the menu defined above (submenu). The first action we take is assigning the body object of the popup window:

var popupBodyObj = popupObj.document.body;

We then set the border to 1 pixel, purple, and solid:

popupBodyObj.style.border = "1px purple solid";

Filling the content of the popup window is not a trivial task. One of the ways to do it is by assigning its innerHTML to the outerHTML of the pages' menu:

popupBodyObj.innerHTML = menuID.outerHTML;

Next, we need to assign the onClick event handlers to all pages' links. We iterate over all page's links and assign the doclick function as their onClick event handler:

for (var i = 0; i < popupBodyObj.all.length; i++) {
  if (popupBodyObj.all[i].tagName == "A")
             popupBodyObj.all[i].onclick = doClick;
}

Here is the showMenu() function in full:

function showMenu(linkObj, menuID) {
  var popupObj = window.createPopup();
  var popupBodyObj = popupObj.document.body;
  popupBodyObj.style.border = "1px purple solid";
  popupBodyObj.innerHTML = menuID.outerHTML;
  for (var i = 0; i < popupBodyObj.all.length; i++) {
    if (popupBodyObj.all[i].tagName == "A")
      popupBodyObj.all[i].onclick = doClick;
  }
  popupObj.show(0, linkObj.offsetHeight, menuID.offsetWidth, menuID.offsetHeight, linkObj);
}

The last statement of the function displays the popup window, as explained above. We position the window with respect to the link that called it, linkObj. If you omit this reference, the popup window will be positioned with respect to the screen top left corner. The horizontal offset is 0. In order to avoid hiding the clicked link when the window pops up, we set the vertical offset to the link's height, linkObj.offsetHeight. Naturally, we set the window's width and height to the original menu's width (menuID.offsetWidth) and height (menuID.offsetHeight).

The function doClick() is a two-liner code which changes the URL of the current window (parent.href) to the URL of the clicked link (this):

function doClick() {
  parent.location = this.href;
  return false;
}

Next: A Final Word

Produced by Yehuda Shiran and Tomer Shiran

Created: April 10, 2000
Revised: April 10, 2000

URL: https://www.webreference.com/js/tutorial1/popup.html

Working with Windows: Creating a Popup Window

Working with Windows

Creating a Popup Window

Find a programming school near you