我的博客| Blog
- ·微信小程序错误：VM564:...
- ·mongodb3.2设置密码...
- ·单行滚动代码-单行滚动效果
- ·自己动手制作图形字体，以便于...
- ·MySQL无限级分类PHP按...
- ·Windows下的Apach...
- ·如何将网站上的文章分享到微信...
- ·PHP实现自动获取本月第几个...
联系我| Contact Me
- 电话：18681257080
- QQ：271538869
- 邮编：518020
- 信箱：service@08321.org
- 地址：四川省内江市资中县
诚信稳健，和谐共赢
- 以诚信为立世之本，在稳健的基础上，不断寻求创新与突破。
- 以务实严谨、精微细致的专业精神，为客户做最优质的策划，实现效果最大化。
成功，依稀可见
- 为什么成功依稀可见？
- 依希认为：每一人都有成功的机会，只要我们愿意付出努力，成功就在我们的前方。所以：成功，依稀可见！
我的博客
利用JS在本页加载新窗口（二）
来源：本站编辑 发布日期：2009-8-31 已有 人浏览过此信息
二、用XHTML实现
原理：也是用两个层，一个遮挡，一个做前景。不同的是前景层不用预置好，而是用前景层做一个容器，然后用JS在里面加入一个Ifrmae,并指定连接的源文件。这种方法实用于比较多这种效果的页面，例如通知阅读等。
parent.html 代码如下:
<html>
<head>
<title>测试JS在本页弹窗效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<style type="text/css">
<!--
.info_bg{display:none;position:absolute;width:100%;height:100%;z-index:9998;top:0px;left:0px;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}/*-moz-opacity:0.5;opacity:0.5;--这是为FireFox等浏览器准备好的*/
.info{position:absolute;z-index:9999;top:20%;left:30%;background:#fff;color:#f00;display:none;}
//-->
</style>
<script language="javascript" type="text/javascript" src="new.js"></script>
</head>
<body>
<div class="info_bg" id="infobg"></div>
<div class="info" id="info"></div>
<h1>测试JS在本页弹窗效果</h1><br/>
<a href="#" onclick="showinfo(400,220,'child.html');return false;">显示新窗口</a>
</body>
</html>
子窗口文件 child.html 代码:
<html>
<body>
<p><h1>这是新窗口噻</h1></p>
<a href="#" onclick="parent.closeinfo();">关闭此窗口<a>
</body>
</html>
主角登场, JS文件 new.js 代码如下:
function showinfo(w,h,srcurl)
{
/* --IE6下选择框优先级高于DIV，所以会显示到前面，这代码是把所有选择框斩首了。
var selects = document.getElementsByTagName("select");
for (i = 0; i != selects.length; i++)
{
selects[i].style.visibility = "hidden";
}
*/
var infobg=document.getElementById('infobg');
var info=document.getElementById('info');
infobg.style.display='block';
infobg.style.height=document.body.clientHeight+"px";
infobg.style.width=document.body.clientWidth+"px";
info.style.display='block';
/*当前页面超过一屏时可使用这个，能把出现的框定位在当前位置居中
var k=document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop+(document.documentElement.clientHeight-h)/2;
info.style.top=k+"px";
info.style.left=(document.documentElement.clientWidth-w)/2+"px";
*/
info.style.width=w+"px";
info.style.height=h+"px";
info.innerHTML="<iframe frameborder='0' scrolling='no' height='"+h+"' width='"+w+"' src='"+srcurl+"'></iframe>"
}
function closeinfo()
{
/*--IE6 下这代码是把所有选择框复活一下。
var selects = document.getElementsByTagName("select");
for (i = 0; i != selects.length; i++)
{
selects[i].style.visibility = "visible";
}
*/
var infobg=document.getElementById('infobg');
var info=document.getElementById('info');
info.innerHTML="";
info.style.display='none';
infobg.style.display='none';
}
虽然后面这个比较复杂一点,但是实用性很高.
轻量级的少数几个框可以用第一种方法,但是重量级的就得用第二种了. 为什么呢? 我也想想,,,,,
辛苦,,,擦汗,,写完,,收工...........Down机,睡觉.........
原理：也是用两个层，一个遮挡，一个做前景。不同的是前景层不用预置好，而是用前景层做一个容器，然后用JS在里面加入一个Ifrmae,并指定连接的源文件。这种方法实用于比较多这种效果的页面，例如通知阅读等。
parent.html 代码如下:
<html>
<head>
<title>测试JS在本页弹窗效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<style type="text/css">
<!--
.info_bg{display:none;position:absolute;width:100%;height:100%;z-index:9998;top:0px;left:0px;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}/*-moz-opacity:0.5;opacity:0.5;--这是为FireFox等浏览器准备好的*/
.info{position:absolute;z-index:9999;top:20%;left:30%;background:#fff;color:#f00;display:none;}
//-->
</style>
<script language="javascript" type="text/javascript" src="new.js"></script>
</head>
<body>
<div class="info_bg" id="infobg"></div>
<div class="info" id="info"></div>
<h1>测试JS在本页弹窗效果</h1><br/>
<a href="#" onclick="showinfo(400,220,'child.html');return false;">显示新窗口</a>
</body>
</html>
子窗口文件 child.html 代码:
<html>
<body>
<p><h1>这是新窗口噻</h1></p>
<a href="#" onclick="parent.closeinfo();">关闭此窗口<a>
</body>
</html>
主角登场, JS文件 new.js 代码如下:
function showinfo(w,h,srcurl)
{
/* --IE6下选择框优先级高于DIV，所以会显示到前面，这代码是把所有选择框斩首了。
var selects = document.getElementsByTagName("select");
for (i = 0; i != selects.length; i++)
{
selects[i].style.visibility = "hidden";
}
*/
var infobg=document.getElementById('infobg');
var info=document.getElementById('info');
infobg.style.display='block';
infobg.style.height=document.body.clientHeight+"px";
infobg.style.width=document.body.clientWidth+"px";
info.style.display='block';
/*当前页面超过一屏时可使用这个，能把出现的框定位在当前位置居中
var k=document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop+(document.documentElement.clientHeight-h)/2;
info.style.top=k+"px";
info.style.left=(document.documentElement.clientWidth-w)/2+"px";
*/
info.style.width=w+"px";
info.style.height=h+"px";
info.innerHTML="<iframe frameborder='0' scrolling='no' height='"+h+"' width='"+w+"' src='"+srcurl+"'></iframe>"
}
function closeinfo()
{
/*--IE6 下这代码是把所有选择框复活一下。
var selects = document.getElementsByTagName("select");
for (i = 0; i != selects.length; i++)
{
selects[i].style.visibility = "visible";
}
*/
var infobg=document.getElementById('infobg');
var info=document.getElementById('info');
info.innerHTML="";
info.style.display='none';
infobg.style.display='none';
}
虽然后面这个比较复杂一点,但是实用性很高.
轻量级的少数几个框可以用第一种方法,但是重量级的就得用第二种了. 为什么呢? 我也想想,,,,,
辛苦,,,擦汗,,写完,,收工...........Down机,睡觉.........
上一条：利用JS在本页加载新窗口（一）
下一条：二级分类,二级联动技巧
