返回首页 常用 JavaScript 网页特效

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

实例说明

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

技术要点

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