Javascript Window Function guide-create a pop-up window

Internet Explorer 5.5 supports the creatpopup () method for a new window object (). You can create a pop-up window like the following:

VaR popupobj = Window. createpopup ();

After you create this object, the pop-up window is not displayed. You must call its show method:

Popupobj. Show (yoffset, xoffset, width, height, referenceobj)

Here:

Yoffset is the horizontal offset between the pop-up window and the upper left corner of the screen.

Xoffset is the vertical offset between the pop-up window and the upper left corner of the screen.

Width is the width of the pop-up window.

Height is the height of the pop-up window.

Referenceobj is an optional parameter, which replaces the upper left corner of the screen as a reference for referencing yoffset and xoffset.

Let's demonstrate the usefulness of the new pop-up window. If you click the link below, a menu of all the tutorials will pop up. Note: When the menu pops up, the page will scroll back to its top. How can we execute this pop-up window? First, you need to define a visible menu, which will be reproduced in the pop-up menu. To hide a link, you can place the menu in a hidden position. We select the location (-1000,-1000) and define it in the STYLE tag of the menu (somewhere in the head segment ):

<Style>

. Menu {position: absolute; top:-1000; left:-1000}

</Style>

Run the menu as the link to the table:

<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> </tr>

</Table>

The link itself (the page of the tutorial) does not change the URL, but when clicked, The showmenu () function is called:

<A href = '# 'onclick = 'showmenu (this, submenu)'> tutorial's pages </a>

The showmenu () function has two parameters. One is the linked object, which calls the function, and the other is the menu ID. The first action we want to take is to allocate the body object in the pop-up window:

VaR popupbodyobj = popupobj.doc ument. Body;

Then, set the boundary to 1 pixel, purple, and solid style:

Popupbodyobj. style. Border = "1px purple solid ";

Filling in the content in the pop-up window is not a trivial task. One method is to use innerhtml and outerhtml:

Popupbodyobj. innerhtml = menuid. outerhtml;

Next, we need to assign an onclick event handler to all links on the page and define the Event Response Function as doclick.

For (VAR I = 0; I <popupbodyobj. All. length; I ++ ){

If (popupbodyobj. All [I]. tagname = "")

Popupbodyobj. All [I]. onclick = doclick;

}

The following is the full code of the showmenu () function:

Function showmenu (linkobj, menuid ){

VaR popupobj = Window. createpopup ();

VaR popupbodyobj = popupobj.doc ument. 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 = "")

Popupbodyobj. All [I]. onclick = doclick;

}

Popupobj. Show (0, linkobj. offsetheight, menuid. offsetwidth, menuid. offsetheight, linkobj );

}

The last statement of the function is to display the pop-up window. We will place the pop-up window next to the linkobj link that calls it. If you omit this reference, the pop-up window will be placed in the upper-left corner of the reference screen. The horizontal offset is 0. To avoid hidden links during window pop-up, we need to set the vertical offset of link height, linkobj. offsetheight. Naturally, we set the window width and height to the width (menuid. offsetwidth) and height (menuid. offsetheight) of the initial menu ).

The doclick () function is a two-line code program that modifies the URL (parent. href) of the current window to the URL (this) of the click link ):

Function doclick (){

Parent. Location = This. href;

Return false;

}

Summary
In this tutorial, we try to overwrite most javascript content about window-related features. We show you how to open a new window as required, write content in the window, manipulate it, and close it. We also introduced how to reference the parent window that opens the window. Finally, we have two special types of Windows: Dialog Box and pop-up window.