"How to make a pop-up window?" This is a question often asked by Dreamweaver beginners. Just find a website that provides special effects, or download a special effects tool and paste the code! It's not easy yet. In fact, the easier way is to use our most commonly used Dreamweaver. A normal pop-up window can be completed with just a few clicks. Don’t believe it? Come and see! Just follow the following steps and you can easily create a pop-up window effect.
1. First, call up the behavior panel from Window->Behaviors in the menu bar or directly press the shortcut key Shift+F3.
2. As shown in the figure, press the "+" sign in the upper left corner of the behavior panel to add a behavior, and select the "Open Browser Window" behavior in the pop-up menu.
3. After selecting the behavior, the Open Browser Window dialog box will pop up, as shown in the figure. Just fill in the corresponding window information in the dialog box and click "OK" to complete the customization of the pop-up window. in
"URL to Display": For the address of the web page you want to display in a new window, you can enter the address directly or press the "Browse" button to specify it.
"Window Width" and "Window Height": are the width and height of the new window respectively, in px.
"Attributes": It is the characteristics of the window.
"Navigation Toolbar", "Menu Bar", "Location Toolbar", "Scrollbars as Needed", "Status Bar", "Resize Handles"
Represents toolbar, menu bar, positioning toolbar, scroll bar and change size handle respectively. Selecting the check mark in front of the corresponding location means that the new window has the corresponding features.
“Window Name”: is the name of the target window. You can choose any one, or you can specify the name of a window in the frame group. When making a pop-up window, just give it a random name.
After completing the above steps, the behavior panel will become like this, indicating that a new browsing window will be opened while loading the page (onLoad).
In fact, the process of adding behaviors in the behavior panel is the process of Dreamweaver generating Javascript code. In the above steps, the following code was generated. Shown in bold below, the comments between "< !—" and "-- >" are the comments for this part of the code:
<html>
<head>
<title>Untitled Document</title>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
< script language="JavaScript" >
< !--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-- >
</ /script >< !—Open the window based on the passed value -- >
</ /head >
< body bgcolor="#FFFFFF" text="#000000" onLoad="MM_openBrWindow('yourpage.htm', 'winname','toolbar=yes,location=yes,status=yes, menubar=yes,scrollbars=yes, resizable=yes,width=300,height=200')" >
< !—Set the value of each attribute of the pop-up window, pass the value to each corresponding formal parameter, and set the firing event to onLoad-->
Pop-up window effect
< /body >
< /html >
You can understand the above code like this: when the onLoad event is fired (that is, when the image or page ends loading), the MM_openBrWindow() method is called and the value
"'yourpage.htm', 'winname', 'toolbar=yes,location=yes, status=yes,menubar=yes,scrollbars=yes, resizable=yes,width=300,height=200'"
(Here called actual parameters) Pass in the corresponding formal parameters - "theURL, winName, features" for use by window.open(). Note that all three parameters must be enclosed in single quotes. Among these codes, the most critical sentence is:
"window.open(theURL,winName,features)"
What it means is that in the window named winName, open the page at the URL address according to the characteristics specified by features.
After understanding the meaning of the code, we can know that the code can be written directly like this: add in <body>
onLoad="window.open('yourpage.htm', 'winname','toolbar=yes, location=yes,status=yes,menubar=yes, scrollbars=yes,resizable=yes,width=300,height=200' )"
One sentence. This way of writing is no different from the effect of Dreamweaver automatically generating code.
We already know the meaning of the three parameters in window.open() - the first is the address of the page to be displayed, the second is the name of the target window, and the third is a description of the appearance characteristics of the window. I won’t go into details about the first and second parameters. Let’s talk about the third parameter. For the third parameter, we can write
"'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no, width=300, height=200,left=100, top=100'"
Here, toolbar represents the toolbar, location represents the address bar, directories represent the navigation bar, status represents the status bar, menubar represents the menu bar, scrollbars represents the scroll bar, resizable represents the size change handle, and width and height represent the width and height of the window respectively. left and top represent the position where the window pops up.
The values of toolbar, location, directories, status, menubar, scrollbars, and resizable can be set to yes, no, 1, or 0. yes (1) means that the new window has this feature, and no (0) does not. The values of width, height, left, and top should be filled in with numbers, and the unit is px.
Having said so much, do you understand? Isn’t it easy to add behaviors and create pop-up windows in Dreamweaver? Isn’t it difficult to write code by hand? As long as you practice a little more, in a short period of time, you will feel: It turns out that making pop-up windows is so simple!