Pop-up windows often bubble in the network of Friends on the "pop-up window" will not be unfamiliar, such as Sina, 163 and other sites, a home immediately 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 () or relative path (... /page.htm) is OK.
Example code 1:
〈script language= "JavaScript"
〈!--
window.open (' http://www.google.com ');
file://--〉
〈/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 ()
{
file://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 ();
}
file://the display position 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:p Opupwindow ();" 〉
Auto Popup when page closes
〈body onunload= "JavaScript:p Opupwindow ();" 〉
Trigger pop-up window by link or button
〈a href= "#" onclick= "JavaScript:p Opupwindow ();" 〉
〈input type= "button" name= pop-up window "onclick=" JavaScript:p Opupwindow (); 〉
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= ' closed '
Summary
Learn the properties of pop-up windows, play with your imagination, and you can create cooler effects of pop-up windows.