JavaScript特效实例011-弹出全屏显示的网页模式对话框

时间：2015-05-16 10:35:55 收藏：0 阅读：169

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

实例说明

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

技术要点

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

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

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