Web page production should master technology: Customize the page "pop-up window"

Pop-up windows | pages | page

Often bubble in the online Friends of "pop-up window" will not be unfamiliar, such as Sina, 163 and other sites, a first page will pop up a window, which is usually some notice information, or flash ads and so on. In fact, this effect is very easy to achieve, everyone with me to do it!

　　Non-decorated pop-up window

Insert the following code into your page, the page load will automatically pop a window, and open the Google search engine, is not very simple ah!

Placing the code in the middle of 〈!-xxx--〉 is intended to be compatible with the needs of the lower version of the browser, and the contents of the label in the lower version of the browser will be treated as a gaze.

The open page uses an absolute path (http://) or a relative path (...). /page.htm) is OK.

Example code 1:

〈script language= "JavaScript"
〈!--
window.open (\ ' http://www.webjx.com\ ');
--〉
〈/script〉

　　Cosmetic pop-up window

With this code, we can do more control over the pop-up window, including the window size, the window position, whether to bring the toolbar, whether the size can be changed, and so on.

Example code 2:

〈script language= "JavaScript1.2" type= "text/javascript1.2"
var popupwin=0;
function Popupwindow ()
{
Determine if the window (Popupwin) already exists, and if it already exists, close the window before opening a new window
if (Popupwin)
{
if (!popupwin.closed) popupwin.close ();
}
Position the display of the pop-up window based on the parameters
Popupwin = window.open (' page.htm ', \ ' popupwin\ ', \ ' Toolbar=no,location=no,
Directories=no,status=no,menub ar=no,scrollbar=no,resizable=no,copyhistory=yes,width=100,height=100,
Left=100,top=100,screenx=100,screeny=100 ');
}
〈/script〉

　　Pop-up window Parameters list

Pop-up window command format: "window.open (' urlstr ', ' windowname ', ' property ');", Where:

The 1.window.open command is used to eject a new window on a Web page.

2.URLSTR: The page displayed by the pop-up window

3.WindowName: The name of the pop-up window can be arbitrarily specified, can also be used to replace

4.Property: Used to control the properties of pop-up window display, the specific parameters can be controlled:

5.Toolbar: Whether the browser toolbar is displayed, yes is displayed, no is not displayed

6.Location: Show the browser address bar, yes to show, no to not display

7.Directories: Whether the table of Contents button is displayed, yes is displayed, no is not displayed

8.Status: Whether the status bar is displayed, yes is displayed, no is not displayed

9.Menubar: Whether the menu bar is displayed, yes is displayed, no is not displayed

10.Scrollbar: Activate horizontal and vertical flow bar, yes to show, no to not show

11.Resizable: Can change window size, yes to show, No to show

12.Width: Specifies the width of the window, in pixels

13.Height: Specifies the height of the window, in pixels

14.Left: Specifies the distance of the window from the left side of the screen, in pixels

15.Top: Specifies the distance of the window from the top of the screen, in pixels

16.screenX: equivalent to left property

17.screenY: Equivalent to top property

　　Effects Window Example

Understanding the definition of window properties, we look at some special applications, there are really some learning in it.

　　Controlling pop-up windows through function calls

The pop-up window, as defined by example code 2, does not automatically pop up before the Popupwindow method is invoked, and here we look at several common invocation methods:

　　Automatic pop-up window when page loads

〈body onload= "Javascript:popupwindow ();" 〉

　　Auto Popup when page closes

〈body onunload= "Javascript:popupwindow ();" 〉

Trigger pop-up window by link or button

〈a href= "#" onclick= "Javascript:popupwindow ();" 〉
〈input type= button "name=" pop-up Window "onclick=" Javascript:popupwindow (); " 〉

　　Pop-up window timed off

Add the following snippet of code to the pop-up window, and the pop-up window will automatically close in 20 seconds. (This code is added to the pop-up window, not the home page)

〈script language= "JavaScript"
function Closeit ()
{
SetTimeout ("Self.close ()", 10000)//MS
}
〈/script〉

Add this code to the 〈head〉 tag and then modify the 〈body〉 label to 〈body onload= "Closeit ()".

Add a Close button to the pop-up window

In the pop-up window add the following code, the page will be a button, click this button, pop-up window will automatically close, without any hint.

〈input type=\ ' button\ ' value=\ ' close \ ' onclick=\ ' window.close () '

　　Summary

Learn the properties of pop-up windows, play with your imagination, and you can create cooler effects of pop-up windows.