I think most people know how to use web pages to pop up various forms of windows. But how to make a variety of pop-up windows? Let's take a look at it today:
1. Pop up a full screen window
<HTML>
<Body onload = "window. Open ('HTTP: // www.pconline.com.cn ', 'example01', 'fullscreen');">;
<B> www.e3i5.com </B>
</Body>
</Html>
2. Pop up a window after F11
<HTML>
<Body onload = "window. Open ('HTTP: // www.pconline.com.cn ', 'example02', 'channelmode');">;
<B> www.e3i5.com </B>
</Body>
</Html>
3. Pop up a window with the toolbar of the favorite Link
<HTML>
<Body onload = "window. Open ('HTTP: // www.pconline.com.cn ', 'example03', 'width = 400, Height = 300, directories');">
<B> www.e3i5.com </B>
</Body>
</Html>
4. webpage dialog box
<HTML>
<Script language = "JavaScript">
<! --
Showmodaldialog ('HTTP: // www.pconline.com.cn ', 'example04', 'dialogwidth: 400px; dialogheight: 300px;
Dialogleft: 200px; dialogtop: 150px; center: Yes; help: Yes; resizable: Yes; Status: Yes ')
// -->
</SCRIPT>
<B> www.e3i5.com </B>
</Body>
</Html>
<HTML>
<Script language = "JavaScript">
<! --
Showmodelessdialog ('HTTP: // www.pconline.com.cn ', 'example05', 'dialogwidth: 400px; dialogheight: 300px;
Dialogleft: 200px; dialogtop: 150px; center: Yes; help: Yes; resizable: Yes; Status: Yes ')
// -->
</SCRIPT>
<B> http://www.pconline.com.cn </B>
</Body>
</Html>
Showmodaldialog () or showmodelessdialog () to call the webpage dialog box. The difference between showmodaldialog () and showmodelessdialog () lies in the window opened by showmodaldialog () (mode window ), set it to the parent window. You must close the window to access the parent window (we recommend that you use it as little as possible to avoid dislike). showmodelessdialog () (no mode window for short ), you can access the window opened in the parent window without closing the window.
Dialogheight: the height of the window in the iheight Setting dialog box.
Dialogwidth: iwidth: Set the window width in the dialog box.
Dialogleft: Left position in the dialog box relative to the upper left corner of the desktop.
Dialogtop: the top position in the window of the iypos Setting Dialog Box relative to the top left corner of the desktop.
Center: {Yes | no | 1 | 0} specifies whether to center the dialog box on the desktop. The default value is "yes ".
Help: {Yes | no | 1 | 0} specifies whether the context-sensitive help icon is displayed in the dialog box. The default value is "yes ".
Resizable: {Yes | no | 1 | 0} specifies whether the dialog box window size is variable. The default value is "no ".
Status: {Yes | no | 1 | 0} specifies whether the status bar is displayed in the dialog box. For non-mode dialog box windows, the default value is "yes"; for mode dialog box windows, the default value is "no ".
5. HTA window
The full name of HTA is HTML application.ProgramYou just need to simply use. HTA to save the HTML page for the extension, even if you have created an HTA file, we will use HTA to compile a window.CodeSave as the. HTA file and open it in a browser.
<HTML>
<Head>
<Title> www.e3i5.com </title>
<HTA: Application ID = "Ohta"
Applicationname = "MyApp"
Border = "thin"
Borderstyle = "normal"
Caption = "yes"
Icon = "filename. ICO"
Maximizebutton = "yes"
Minimizebutton = "yes"
Showintaskbar = "no"
Ingleinstance = "no"
Sysmenu = "yes"
Version = "1.0"
Windowstate = "normal"/>
</Head>
<Body>
<B> http://www.pconline.com.cn </B>
</Body>
</Html>
Some people will find that the above Code is a little different from the usual HTML, with more HTA: Application tags, which is the key. HTA provides a series of application-oriented functions through it, next, let's talk about its attributes (my head is bloating again)
Applicationname attribute (applicationname)
This attribute is used to set the HTA name.
Border attributes (Border)
This attribute is the window border type set to HTA. The default value is thick.
It can be set to thick and the specified window is a rough border.
Dialog window specifies window as dialog box
None the specified window has no border
Thin specifies the window as a narrow border
Borderstyle attributes (borderstyle)
This attribute is used to set the border format of the HTA window. The default value is normal.
It can be set
Normal normal border format
Combined border of complex concave/convex format
Raised protruding 3D border
Static 3D border format
3D border with sunken Concave
Caption attributes (Caption)
This attribute sets whether to display the title bar or title in the HTA window. The default value is yes.
Icon properties)
This property is used to set the application icon.
Maximizebutton attributes (maximizebutton)
This attribute sets whether to display the maximize button in the HTA window. The default value is yes.
Minimizebutton attribute (minimizebutton)
This attribute sets whether to display the minimization button in the HTA window. The default value is yes.
Showintaskbar attribute (showintaskbar)
This attribute sets whether to display this application in the taskbar. The default value is yes.
Singleinstance attributes (singleinstance)
This attribute sets whether the application can run only once at the same time. The Secondary attribute is identified by the applicationname attribute. The default value is no.
Sysmenu attribute (sysmenu)
This attribute sets whether to display the system menu in the HTA window. The default value is yes.
Version)
This attribute is used to set the application version. The default value is null.
Windowstate attribute (windowstate)
This attribute sets the initial size of the HTA window. The default value is normal.
It can be set to normal default size
Minmize minimized
Maximize Maximization
The above brackets are the attributes referenced by the script. All the above attributes in the script are read-only. In addition, you can use the CommandLine attribute in the script to retrieve parameters when an application starts.
In HTA, you can continue to use the vast majority of tags and scripts in HTML.
// ================================================ ======================================
Script Language = "JavaScript">
<! --
Window. Open ("page.html ")
-->
</SCRIPT>
Because this is a piece of javascripts code, they should be placed between the <script language = "JavaScript"> label and </SCRIPT>.
<! -- And --> are used for browsers of earlier versions.
The code in the tag is not displayed as text in these old browsers. This is a good habit.
Window. Open ('page.html ') is used to control the new window page.html
If page.html is not in the same path as the main window, you must specify the path, absolute path (http: //), and relative path.
You can use single quotes and double quotes, but do not mix them.
This code can be added to any location of HTML, either between The earlier the execution, especially the long Page code, and try to bring the page up early.
[2. After setting, the pop-up window is displayed]
Let's talk about the settings in the pop-up window.
You just need to add something to the code above. We will customize the appearance, size, and position of the pop-up window to adapt to the specific situation of the page.
<Script language = "JavaScript">
<! --
Window. Open ("page.html", "newwindow", "Height = 100,
Width = 400, Top = 0, Left = 0, toolbar = No, menubar = No,
Scrollbars = No, resizable = No, location = No, status = No ")
// Write a row
-->
</SCRIPT>
Parameter description:
<Script language = "JavaScript"> the JS script starts;
Window. Open command to pop up a new window;
'Page.html 'name of the pop-up window;
'Newwindow' indicates the name of the pop-up window (not the file name). It is optional and can be replaced by null;
Height = 100 window height;
Width = 400 window width;
Top = the pixel value between the 0 window and the top of the screen;
Left = 0 the pixel value between the window and the left of the screen;
Toolbar = No indicates whether to display the toolbar. Yes indicates display;
Menubar and scrollbars indicate the menu bar and scroll bar.
Resizable = No: whether to change the window size. Yes: Yes;
Location = No indicates whether the address bar is displayed. Yes indicates yes;
Status = No whether to display the information in the status bar (usually the file has been opened), yes is allowed;
</SCRIPT> end of JS script
[3. Function Control pop-up window]
The following is a complete code.
<HTML>
<Head>
<Script language = "JavaScript">
<! --
Function openwin (){
Window. Open ("page.html", "newwindow", "Height = 100,
Width = 400, toolbar = No, menubar = No, scrollbars = No,
Resizable = No, location = No, status = No ")
// Write a row
}
// -->
</SCRIPT>
</Head>
<Body onload = "openwin ()">
... Any page content...
</Body>
</Html>
A function openwin () is defined here, and the function content is to open a window. There is no purpose before calling it.
How to call it?
Method 1: <body onload = "openwin ()"> A window pops up when the browser reads the page;
Method 2: <body onUnload = "openwin ()"> A window pops up when the browser leaves the page;
Method 3: call with a connection:
<A href = "#" onclick = "openwin ()"> open a window. </a>
Note: "#" is a virtual connection.
Method 4: call with a button:
<Input type = "button" onclick = "openwin ()" value = "open window">
4. Two windows are displayed at the same time]
PairSource codeSlightly changed:
<Script language = "JavaScript">
<! --
Function openwin (){
Window. Open ("page.html", "newwindow", "Height = 100,
Width = 100, Top = 0, Left = 0, toolbar = No, menubar = No,
Scrollbars = No, resizable = No, location = No, status = No ")
// Write a row
Window. Open ("page2.html", "newwindow2", "Height = 100,
Width = 100, Top = 100, Left = 100, toolbar = No, menubar = No,
Scrollbars = No, resizable = No, location = No, status = No ")
// Write a row
}
// -->
</SCRIPT>
To avoid overwriting the two pop-up windows, use top and left to control the position of the pop-up window. Finally, use the four methods mentioned above to call.
Note: The names of the two windows (newwindows and newwindow2) must not be the same, or they are all empty. OK?
Open the file 1.htmin the main window, and pop up the window page.html at the same time]
Add the following code to the
<Script language = "JavaScript">
<! --
Function openwin (){
Window. Open ("page.html", "", "width = 200, Height = 200 ")
}
// -->
</SCRIPT>
Add to the <body> area:
<A href = "1.htm" onclick =" openwin () "> open </a>
You can.
[6. timed close control for the pop-up window]
Next we will make some control over the pop-up window, and the effect will be better.
If we add the field code to the page that pops up (the page is added to the HTML of page.html, not the homepage, otherwise ...),
Is it cool to enable automatic shutdown in 10 seconds?
First, add the following code to the
<Script language = "JavaScript">
Function closeit (){
SetTimeout ("self. Close ()", 10000) // millisecond
}
</SCRIPT>
Then, use <body onload = "closeit ()"> to replace the original <body> sentence in page.html.
(Do not forget to write this sentence! The function of this statement is to call the code for closing the window,
Close the window in 10 seconds .)
7. Add a close button in the pop-up window]
<Form>
<Input type = 'button 'value = 'Close 'onclick = 'window. Close ()'>
</Form>
Now it's more perfect!
[8. included pop-up window-one page and two windows]
The preceding example contains two windows: one is the main window and the other is the small window that appears.
Through the example below, you can complete the above effect on a page.
<HTML>
<Head>
<Script language = "JavaScript">
Function openwin ()
{
OpenWindow = Window. Open ("", "newwin", "Height = 250, width = 250, toolbar = No, scrollbars =" + scroll + ", menubar = No ");
// Write a row
Opendeskdoc ument. Write ("<title> example </title> ")
Openmediaworkflow Doc ument. Write ("<body bgcolor = # ffffff> ")
Openmediaworkflow Doc ument. Write ("Openmediaworkflow Doc ument. Write ("new window opened! ")
Openmediaworkflow Doc ument. Write ("</body> ")
Openmediaworkflow Doc ument. Write ("Openmediaworkflow Doc ument. Close ()
}
</SCRIPT>
</Head>
<Body>
<A href = "#" onclick = "openwin ()"> open a window. </a>
<Input type = "button" onclick = "openwin ()" value = "open window">
</Body>
</Html>
Check if the code in openmediaworkflow Doc ument. Write () is not standard HTML?
You only need to write more rows according to the format. An error occurs when you add one or more labels.
Remember to end with opentracing upload Doc ument. Close.
[9. Ultimate application-Cookie control in the pop-up window]
In retrospect, although the pop-up window above is cool, there is a little bit of a problem (immersed in joy, do not find it ?)
For example, if you place the above script in a page that requires frequent access (such as the homepage ),
So every time you refresh this page, the window will pop up. Is it very annoying? :-(
Is there a solution? Yes! Follow me.
We can use cookies to control it.
First, add the following code to the
<SCRIPT>
Function openwin (){
Window. Open ("page.html", "", "width = 200, Height = 200 ")
}
Function get_cookie (name ){
VaR search = Name + "="
VaR returnvalue = "";
If (document. Cookie. length> 0 ){
Offset = Document. Cookie. indexof (Search)
If (offset! =-1 ){
Offset + = search. Length
End = Document. Cookie. indexof (";", offset );
If (END =-1)
End = Document. Cookie. length;
Returnvalue = Unescape (document. Cookie. substring (offset, end ))
}
}
Return returnvalue;
}
Function loadpopup (){
If (get_cookie ('popped') = ''){
Openwin ()
Document. Cookie = "popped = yes"
}
}
</SCRIPT>
Then, use <body onload = "loadpopup ()"> (not openwin, but loadpop !) Replace the original <body> sentence on the home page.
You can refresh the page or enter the page again, and the window will no longer pop up. Real pop-only-once!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
