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

Home

Backend Development

PHP Tutorial

Technical summary sharing of javascript pop-up windows

小云云

Mar 15, 2018 pm 02:12 PM

javascript js

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啊！）替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7500

CakePHP Tutorial

1377

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

See all articles

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