JS弹出新窗口(模态、非模态)

来源：互联网发布：淘宝无线端图片链接编辑：程序博客网时间：2024/05/07 22:58

弹出居中新窗口，代码如下：

<html><head><title>JS弹出窗口介绍</title></head><script language="javascript" type="text/javascript">function OpenWindow(htmUrl){var url=htmUrl;    var winName="newWin";   var awidth=screen.availWidth/6*2; //窗口宽度,需要设置var aheight=screen.availHeight/5*2; //窗口高度,需要设置 var atop=(screen.availHeight - aheight)/2; //窗口顶部位置,一般不需要改var aleft=(screen.availWidth - awidth)/2; //窗口放中央,一般不需要改var param0="scrollbars=0,status=0,menubar=0,resizable=no,location=0"; //新窗口的参数var params="top=" + atop + ",left=" + aleft + ",width=" + awidth + ",height=" + aheight + "," + param0 ;win=window.open(url,winName,params); //打开新窗口win.focus(); //新窗口获得焦点}</script><body><div><a href="OpenWindow('TestPage.html')">点击弹出居中显示窗口</a></div></body></html>

参数解释：
window.open('1.新窗口的url','2.弹出窗口的名字非必填','3.新窗口的外观参数')弹出新窗口的命令及需要的参数；
height 窗口高度；
width 窗口宽度；
top=窗口距离屏幕上方的象素值；
left 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息，yes为允许；

弹出模态窗口，代码如下：

<html><head>    <title>JS弹出模态窗口介绍</title></head><script language="javascript" type="text/javascript">function OpenDialog(url,width,height){    var params = "dialogWidth:"+ width +"px;dialogHeight:"+ height +"px;center:yes;status:no;help:no";    showModalDialog(url,window,params);}</script><body>    <div>        <a href="OpenDialog('TestPage.html',400,350)">点击弹出模态窗口</a>    </div></body></html>

参数解释：
dialogHeight: iHeight 设置对话框窗口的高度。
dialogWidth: iWidth 设置对话框窗口的宽度。　　
dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。
dialogTop: iYPos 设置对话框窗口相对于桌面左上角的top位置。
center: {yes | no | 1 | 0 } 指定是否将对话框在桌面上居中，默认值是“yes”。
help: {yes | no | 1 | 0 } 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。　　
resizable: {yes | no | 1 | 0 } 指定是否对话框窗口大小可变。默认值是“no”。
status: {yes | no | 1 | 0 } 指定对话框窗口是否显示状态栏。对于非模式对话框窗口，默认值是“yes”；对于模式对话框窗口，默认值是 “no”。