码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-05-16 10:35:55      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:javascript

实例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-弹出全屏显示的网页模式对话框

标签:javascript

原文地址:http://blog.csdn.net/yejinwei1220/article/details/45765767

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!