Technical summary sharing of javascript pop-up windows-PHP Tutorial-php.cn

This article mainly shares with you the technical summary of javascript pop-up windows. Here are some pop-up window parameters. You can set them by yourself. The parameters are optional and separated by commas. String --List the object table separated by commas. Each item has its own value, and they will be separated (eg: "fullscreen=yes, toolbar=yes"). The following are the various features that are supported.

##titlebar = { yes | no | 1 | 0 }Specifies whether to display the title bar in the window. In the case of non-calling HTML Application or a dialog box, this item will be ignored The default is yes##toolbar = { yes | no | 1 | 0 }##width = numberSpecify the width of the window, the unit is pixels The minimum value is 100top = numberSpecify the position of the top of the window, The unit is pixelsThe value must be greater than or equal to 0

1. The most basic pop-up window code　

　<SCRIPT LANGUAGE="javascript"> 
　　<!-- 
　　window.open (&#39;page.html&#39;) 
　　--> 
　　</SCRIPT>

Copy after login

　
Because this is a piece of javascripts code, they should be placed between

works on some older browsers. In these old browsers, the code in the tag will not be displayed as text. Develop this good habit. window.open ('page.html') is used to control the pop-up of a new window page.html. If page.html is not in the same path as the main window, the path should be stated in front, absolute path (http://) and relative Any path (../) is acceptable. You can use either single quotes or double quotes, just don't mix them. This piece of code can be added to any position in the HTML, between and or between. The earlier the code is, the earlier it will be executed. Especially if the page code is long and you want the page to pop up earlier, try to put it as far forward as possible.
　
2. The pop-up window after setting
　
Let’s talk about the settings of the pop-up window. Just add a little more to the code above. Let's customize the appearance, size, and pop-up position of this pop-up window to suit the specific conditions of the page.

　<SCRIPT LANGUAGE="javascript"> 
　　<!-- 
　　window.open (&#39;page.html&#39;, &#39;newwindow&#39;, &#39;height=100, width=400, top=0, left=0, 
toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no&#39;) 
//这句要写成一行
　　--> 
　　</SCRIPT>

Copy after login

#'page.html' The file name of the pop-up window;
'newwindow' The name of the pop-up window (not the file name), optional, can be replaced by empty ''; Height=100 window height; width =400 window width;
Top=0 pixel value from the window to the top of the screen;
left=0 pixel value from the window to the left side of the screen;
toolbar=no whether to display the toolbar, yes means display ;
Menubar, scrollbars represent menu bars and scroll bars.
resizable=no Whether to allow the window size to be changed, yes is allowed;
location=no Whether to display the address bar, yes is allowed;
status=no Whether to display the information in the status bar (usually the file has been opened) ), yes is allowed;
　 End of js script

3. Use functions to control pop-up windows
　
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") 
//写成一行
　　} 
　　//--> 
　　</script> 
　　</head> 
　　<body onload="openwin()"> 
　　任意的页面内容... 
　　</body> 
　　</html>

Copy after login

　A function openwin() is defined here, and the content of the function is to open a window. It serves no purpose until it is called. How to call it? 　
Method one

: A window pops up when the browser reads the page;

Method two

: Pop-up window when the browser leaves the page;
　Method 3: Call with a connection:
　 Note: The "#" used is a virtual connection. 　
Method 4: Call with a button: 　
　

4. Pop up 2 windows at the same time 　　
　　　　　　　　　　　　
##　　　Use top and left to control the pop-up position so that it does not cover each other. Finally, you can call it using the four methods mentioned above.
　Note
: The names of the two windows (newwindows and newwindow2) should not be the same, or they should all be empty.

5. Open the file 1.htm in the main window, and pop up the small window page.html

The following code is added to the main window area:

<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=n o, status=no")　
//写成一行
 
　　window.open ("page2.html", "newwindow2", "height=100, 
width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, 
loca tion=no, status=no")　
//写成一行
 
　　} 
　　//--> 
　　</script>

Copy after login

Add Area: 　open.
6. Timing closing control of pop-up windows 　

Next we will perform some control on the pop-up windows, and the effect will be better. Wouldn't it be cooler if we added a small piece of code to the pop-up page (note that it is added to the HTML of page.html, not the main page), so that it automatically closes after 10 seconds?

First, add the following code to the area of the page.html file:

<script language="JavaScript"> 
　　function closeit() 
　　{ 
　　setTimeout("self.close()",10000) 　
//毫秒
 
　　} 
　　</script>

Copy after login

　　然后，再用这一句话代替page.html中原有的这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)
7、在弹出窗口中加上一个关闭按钮

<FORM> 
　　<INPUT TYPE=&#39;BUTTON&#39; VALUE=&#39;关闭&#39; onClick=&#39;window.close()&#39;> 
　　</FORM>

Copy after login

　　呵呵，现在更加完美了！
8、内包含的弹出窗口-一个页面两个窗口　　上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。

　<html> 
　　<head> 
　　<SCRIPT LANGUAGE="JavaScript"> 
　　function openwin() 
　　{ 
　　OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no 
,scrollbars="+scroll+",menubar=no"); 
　　//写成一行 
　　OpenWindow.document.write("<TITLE>例子</TITLE>") 
　　OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") 
　　OpenWindow.document.write("<h1>Hello!</h1>") 
　　OpenWindow.document.write("New window opened!") 
　　OpenWindow.document.write("</BODY>") 
　　OpenWindow.document.write("</HTML>") 
　　OpenWindow.document.close() 
　　} 
　　</SCRIPT> 
　　</head> 
　　<body> 
　　<a href="#" onclick="openwin()">打开一个窗口</a> 
　　<input type="button" onclick="openwin()" value="打开窗口"> 
　　</body> 
　　</html>

Copy after login

　　看看OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。
9、终极应用--弹出的窗口之Cookie控制
　　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病，比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，我们使用cookie来控制一下就可以了。
　　首先，将如下代码加入主页面HTML的区：

<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(&#39;popped&#39;)==&#39;&#39;){ 
　　openwin() 
　　document.cookie="popped=yes" 
　　} 
　　} 
　　</script>

Copy after login

然后，用（注意不是openwin而是loadpop啊！）替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。

channelmode = { yes \| no \| 1 \| 0 }	Whether to display the ladder mode in the window	The default is no
directories = { yes \| no \| 1 \| 0 }	Whether to display various buttons in the window	The default is yes
fullscreen = { yes \| no \| 1 \| 0 }	Whether to display the browser in full screen mode	The default is no
height = number	Specify the height of the window, the unit is pixels	The minimum value is 100
left = number	Specify The distance between the window and the left border, in pixels	The value must be greater than or equal to 0
location = { yes \| no \| 1 \| 0 }	Specify whether to display the address bar in the window	The default is yes
menubar = { yes \| no \| 1 \| 0 }	Specify whether to display the address bar in the window Display the menu bar in the window	The default is yes
resizable = { yes \| no \| 1 \| 0 }	Specify whether to display the resizable menu bar in the window Handle for user resizing	Default is yes
scrollbars = { yes \| no \| 1 \| 0 }	Specifies whether to display in the window Horizontal or vertical scroll bar	The default is yes
status = { yes \| no \| 1 \| 0 }	Specifies whether to display status in the window Column	Defaults to yes

Specify whether to display the toolbar in the window, including buttons such as forward, back, stop, etc.	The default is yes

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Technical summary sharing of javascript pop-up windows