JavaScript特效实例010-弹出网页模式对话框

最新推荐文章于 2025-05-14 13:39:30 发布

迷茫的寻路者

最新推荐文章于 2025-05-14 13:39:30 发布

阅读量955

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript网页特效范例文章标签： javascript

本文链接：https://blog.youkuaiyun.com/yejinwei1220/article/details/45742309

JavaScript网页特效范例专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建弹出的网页模式对话框，包括实例说明、技术要点和实现步骤。

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

实例010 弹出网页模式对话框

实例说明

弹出一个指定大小的网页模式对话框。

技术要点

本实例主要应用window对象的showModalDialog（）方法，该方法用于弹出网页（模式）对话框，其语法如下。

variant = object.showModalDialog(sURL[,vArguments[,sFeatures]])

参数说明。

1.sURL: 指定URL文件地址。

2.vArguments: 用于向网页传递参数，传递参数的类型不限制，对于字符串类型，最大为4096个字符，但也可以传递对象，例如index.htm。

3.sFeatures : 可选项，窗口对话框的设置参数主要参数如表。

参数说明
参数	说明
dialogWidth:number	可选项，用于设置对话框的宽度。
dialogHeight:number	可选项，用于设置对话框的高度。
dialogTop:number	可选项，用于设置对话框窗口相对于桌面左上角的TOP位置。
dialogLeft:number	可选项，用于设置对话框窗口相对于桌面左侧的Left位置。
center:{yes\|no\|1\|0}	可选项，用于指定是否将对话框在桌面上居中，yes\|1为居中表示；no\|0为不居中显示，默认值为yes。
help:{yes\|no 1\|0}	可选项，用于指定对话框窗口中是否显示上下文敏感的帮助图标，默认值是yes。
scroll:{yes\|no 1\|0}	可选项，用于指定对话框是否出现滚动条。
resizable:{yes\|no 1\|0}	可选项，用于指定对话框窗口大小是否可变，默认值是no。
status:{yes\|no 1\|0}	可选项，用于指定对话框是否显示状态栏。

实现过程

（1）实现弹出功能的主页面Index.html

<html>
	<head>
    <meta charset="utf-8" />
    	<script type="text/jscript" language="javascript">
			function pp()
			{
				var someValue = window.showModalDialog("new.html","","dialogWidth=640px;dialogHeight:423px;status=no;help=no;scrollbars=no")
			}
        </script>
    </head>
    <body>
    	<input type="button" value = "弹出" onclick = "pp()">
    </body>
</html>

（2）弹出的页面new.html

<html>
<head>
<meta charset="utf-8" />
<title>弹出的窗口</title>
<style type="text/css">
body{
	background-image:url(new.jpg);
	background-repeat:no-repeat;
	}
</style>
</head>
<body>
</body>
</html>

注：style标签的内容为css的知识，我们关注的是script标签内的内容。

这样我们的这个实例就做好了。