返回首页 常用 JavaScript 网页特效

弹出网页模式对话框

实例说明

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

技术要点

本实例主要应用 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>