弹出全屏显示的网页模式对话框

实例说明

弹出全屏显示的网页模式对话框，用户关闭之前不能浏览网站的其他内容。

技术要点

本实例主要应用 screen 对象的 width、height 属性和 window 对象的 showModalDialog（）方法实现。其实还有一种方法打开网页对话框，即 showModelessDialog（）方法。

使用 showModalDialog（）与 showModelessDialog（）方法的区别在于，showModalDialog（）打开的网页对话框为模式窗口，置在父窗口上，必须关闭才能访问父窗口；而 showModelessDialog（）方法打开的对话框是无模式窗口，打开后不关闭也能访问父窗口或其他窗口。

实现过程

1.实现功能的主窗口 index.html

<html>  
    <head>  
    <meta charset="utf-8" />  
        <script type="text/jscript" language="javascript">  
            function pp()  
            {  
                var width = screen.width;  
                var height = screen.height;  
                var someValue = window.showModalDialog("new.html","","dialogWidth="+width+"px;dialogHeight="+height+"px;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>