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

浏览数：23 / 时间：2015年06月08日

实例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标签内的内容。

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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