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

javascriptjs

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> 
　　<!-- 
　　window.open (&#39;page.html&#39;) 
　　--> 
　　</script>

　
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> 
　　<!-- 
　　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>

#'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>

　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>

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>

　　然后，再用

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

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

　　呵呵，现在更加完美了！
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 id="Hello">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>

　　看看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>

然后，用

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

相关推荐：

jQuery实现简单的弹出窗口实例

JS弹出窗口的运用与技巧大全

jQuery实现的模拟弹出窗口功能示例

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

The above is the detailed content of Technical summary sharing of javascript pop-up windows. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。

See all articles

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)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Two Point Museum: All Exhibits And Where To Find Them

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software