如何用JavaScript创建弹出窗口

击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

大家好！我是/小郑搞码事/的小郑

今天和大家分享一下JS如何操作浏览器窗口。只讲如何打开一个新窗口

先来看效果图

上面这个图界面效果就是我们要实现的。

我们常常需要创建一个新窗口，用来向用户显示额外的信息，同时又避免他们正在阅读的信息消失。从实现方案上来看，尽管我们可以用HTML打开一个新的浏览器窗口，但是使用JavaScript可以对新窗口的内容和特性进行更多的控制。

接下来，我们看一下怎么实现的

一、定义窗口打开函数

定义一个打开新窗口的函数newWindow。如上面代码所示，变量catWindow包含一个新的窗口对象，这个对象引用图像文件icon.png，这个新窗口的名称是catWin，必须设置名称，因为我们以后可能希望在a或另一个脚本中引用这个窗口。新窗口的宽度是350像素，高度是260像素，位置是左边400，上边400。

二、写一个调用函数

页面中，包含一个onload事件处理程序，它调用newWinLinks函数，newWinLinks循环遍历页面上的a，检查是否有任何a包含class属性值newWin。如果有，就设置这个a元素的onclick事件处理程序，从而，当点击这个a时，调用newWindow函数。

总结一下

需要注意两个地方：

1、newWindow中，在宽度和高度参数中的逗号之间不能有任何空格，如果有空格，那么脚本可能在某些浏览器中无效，总地来说，当脚本出现错误，需要进行高度时，要首先查找这样的小问题。

2、比如向窗口中添加参数时，希望窗口具有工具栏，地址栏，滚动条

toolbar=yes,location=yes,scrollbars=yes

参数默认是no，可以不填。当然浏览器上表现也有不同，需要知道。

1），弹窗及参数说明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	
</head>
<body>
	
	<input type="button" value="打开新窗口" onclick="openNewWin()" />
	
</body>
<script type="text/javascript">

	function openNewWin() {
		
		var openWindow = window.open("newTest.html",
			"弹到新窗口",
			"height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
		
	}
	
	/***
		(00) window.open    弹出新窗口的命令
		(01) newTest.html   弹出窗口的文件名，或请求地址
		(02) 弹出窗口的名字（不是文件名），非必须，可用空''代替
		(03) height=100     窗口高度
		(04) width=400      窗口宽度
		(05) top=0          窗口距离屏幕上方的像素值
		(06) left=0         窗口距离屏幕左侧的像素值
		(07) toolbar=no     是否显示工具栏，yes为显示
		(08) menubar        表示菜单栏
		(09) scrollbars     表示滚动栏
		(10) resizable=no   是否允许改变窗口大小，yes为允许
		(11) location=no    是否显示地址栏，yes为允许
		(12) status=no      是否显示状态栏内的信息（通常是文件已经打开），yes为允许
	***/
	
</script>
</html>

（2），弹窗并居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	
</head>
<body>
	
	<input type="button" value="弹出的窗口居中" onclick="testOpenCenterWindow()" />
	
</body>
<script type="text/javascript">

	function testOpenCenterWindow() {
		
		// 窗口垂直位置水平位置
		var iTop = (window.screen.availHeight - 30 - 500) / 2;
		var iLeft = (window.screen.availWidth - 10 - 800) / 2; //减width
		var openWindow = window.open("newTest.html"
			,"测试弹窗口并居中"
			,"height=500, width=800, top="+ iTop
			+", left="+ iLeft
			+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
				);
	}
	
</script>
</html>

（3），窗口 location属性

window对象location属性是引用Location对象，它表示该窗口显示文档的URL
window.location.href="page1.jsp";  //当前窗口显示指定页面
window.close();                                 //关闭本页面

（4），窗口与父窗口通信

近公司用了一个老掉牙的弹窗模式——模式化弹窗，拿出来说说吧~

首先看看API，第一句话说的就是：已废弃，但是有时候用不用这个，不是你说了算了啊，咋还得听老大的是不，接下来主要说下showModalDialog()的功能把，以下都是从API的说明中获取到的信息

使用说明

创建一个包含HTML文档的模式化弹出窗口，弹出框后，不能切换到父窗口，但可以父、子窗口互相传递数据

使用模式

returnVal= window.showModalDialog(uri[,arguments][,options]);

参数说明

retuunVal：模式化窗口中返回的值，即：window.returnValue设置的值

uri：模式化窗口的HTML或jsp文档路径

arguments：父画面传递给dialog的值，即：window.dialogArguments

options：弹出框属性的设置，下图为API给出的几个属性设置

效果展示

但这个东西，目前很多浏览器都不支持，比如google、Edge、高版本的浏览器，用起来很不方便。

因为这东西叫模式化窗口，也可以叫阻态窗口，就是不可以切换到父窗口进行操作，而window.open叫非模式化窗口，可以进行切换的，所以根据所需来使用吧~

喜欢的小伙伴们，点一波关注哦，有疑问的童鞋可以下方留言哈~~

在线咨询

上一篇：Wordpress建站教程：给Blocks CSS插件降级，解决不兼容问题
下一篇：JS实用小方法-将时间转换为 `刚刚`、`几秒前`、

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商