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

最新推荐文章于 2024-08-06 10:37:21 发布

justin_hli

最新推荐文章于 2024-08-06 10:37:21 发布

阅读量6.4k

点赞数 2

分类专栏： Javascript 文章标签： javascript url 工具 div

本文链接：https://blog.csdn.net/justin_hli/article/details/7279361

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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