（笔记）javascript弹出窗口总结-优快云博客

本文详细介绍了JavaScript中两种常见的窗口弹出方法：window.open() 和 window.showModalDialog() 的使用方式及其参数设置。通过具体实例展示了如何创建弹出窗口，并进行位置调整及参数传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：window.open()弹出窗口

语法格式：

var returnValue = window.open(URL,windowname[,location]);

参数解释：
URL ：打开窗口的html地址

windowname ： window对象的名称

location ：弹出窗口属性设置参数

returnValue 的值不为空则open成功

**location参数设置可选参数**
属性	说明
width	窗口宽度
height	窗口高度
scrollbars	是否显示滚动条
resizable	设置窗口大小是否固定
toolbar	设置浏览器工具条
menubar	设置菜单条
location	设置地址栏
direction	设置刷新按钮

实例：

JS代码
<script>
        window.onload = function(){
	    var winal = window.open("Hello_World.html", "openwindow"); 
        }
</script

弹出窗HTML代码
<body>
        <p style="color:red;">Hello World!</p>
</body>

效果：.

弹出窗口关闭：

window.close();

弹出窗口居中显示：

<script>
        window.onload = function(){
	    var winal = window.open("Hello_World.html", "openwindow","width=100,height=50"); 
             var width = screen.width;
             var heigth = screen.height;
             winal.moveTo((width-100)/2,(height-50)/2);
        }
</script

二： window.showModalDialog()弹出窗口

语法格式：

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])

参数解释：

sURL：必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments：可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures：可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。

sFeature参数设置可选参数

dialogHeight:

对话框高度，不小于100px

dialogWidth:

对话框宽度

dialogLeft:

离屏幕左的距离

dialogTop:

离屏幕上的距离

center:

{yes|no|1|0}：是否居中，默认yes，但仍可以指定高度和宽度。

help:

{yes|no|1|0}：是否显示帮助按钮，默认yes。

resizable:

{yes|no|1|0}[IE5+]：是否可被改变大小。默认no。

status:

{yes|no|1|0}[IE5+]：是否显示状态栏。默认为yes[Modeless]或no[Modal]。

scroll:

{yes|no|1|0|on|off}：是否显示滚动条。默认为yes。

实例1（有参数的情况）：

var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");

获取参数：

var obj = window.dialogArguments;
alert("您传递的参数为：" + obj.name);

实例2（无参数的情况）：

str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");

文章出自： www.itlanguageexpress.info