我的博客| Blog
- ·微信小程序错误：VM564:...
- ·mongodb3.2设置密码...
- ·单行滚动代码-单行滚动效果
- ·自己动手制作图形字体，以便于...
- ·MySQL无限级分类PHP按...
- ·Windows下的Apach...
- ·如何将网站上的文章分享到微信...
- ·PHP实现自动获取本月第几个...
联系我| Contact Me
- 电话：18681257080
- QQ：271538869
- 邮编：518020
- 信箱：service@08321.org
- 地址：四川省内江市资中县
诚信稳健，和谐共赢
- 以诚信为立世之本，在稳健的基础上，不断寻求创新与突破。
- 以务实严谨、精微细致的专业精神，为客户做最优质的策划，实现效果最大化。
成功，依稀可见
- 为什么成功依稀可见？
- 依希认为：每一人都有成功的机会，只要我们愿意付出努力，成功就在我们的前方。所以：成功，依稀可见！
我的博客
利用JS在本页加载新窗口（一）
来源：本站编辑 发布日期：2009-8-31 已有 人浏览过此信息
今天总结一下在当前页弹新窗口的技巧,这种效果可以有多种方法实现. 今天写两种吧!!
开始喽...
一、用纯DIV实现
原理：在当前页隐藏两个DIV，一个用于遮拦主页面内容，称做背景层吧；另一个用着显示新内容，称着前景层吧。在用户点击触发弹新窗口时，即显示这两个层，背景层还可设置透明度，效果会比较美观。
<html>
<head>
<title>测试DIV在本页弹窗效果</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">
<!--
function showinfo(w,h)
{
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';
info.style.width=w+"px";
info.style.height=h+"px";
}
function closeinfo()
{
var infobg=document.getElementById('infobg');
var info=document.getElementById('info');
infobg.style.display='none';
info.style.display='none';
}
//-->
</script>
</head>
<body>
<div class="info_bg" id="infobg"></div>
<div class="info" id="info">
<p><h1>这是新窗口</h1></p>
<a href="#" onclick="closeinfo();return false;">关闭此窗口</a>
</div>
<h1>测试DIV在本页弹窗效果</h1><br/>
<a href="#" onclick="showinfo(400,220);return false;">显示新窗口</a>
</body>
</html>
持续未完……
开始喽...
一、用纯DIV实现
原理：在当前页隐藏两个DIV，一个用于遮拦主页面内容，称做背景层吧；另一个用着显示新内容，称着前景层吧。在用户点击触发弹新窗口时，即显示这两个层，背景层还可设置透明度，效果会比较美观。
<html>
<head>
<title>测试DIV在本页弹窗效果</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">
<!--
function showinfo(w,h)
{
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';
info.style.width=w+"px";
info.style.height=h+"px";
}
function closeinfo()
{
var infobg=document.getElementById('infobg');
var info=document.getElementById('info');
infobg.style.display='none';
info.style.display='none';
}
//-->
</script>
</head>
<body>
<div class="info_bg" id="infobg"></div>
<div class="info" id="info">
<p><h1>这是新窗口</h1></p>
<a href="#" onclick="closeinfo();return false;">关闭此窗口</a>
</div>
<h1>测试DIV在本页弹窗效果</h1><br/>
<a href="#" onclick="showinfo(400,220);return false;">显示新窗口</a>
</body>
</html>
持续未完……
下一条：利用JS在本页加载新窗口（二）
