飞龙博客

妙法莲华经

点击按钮链接显示隐藏弹出div层

feilong.org 修订于2011-06-10 11:31:30

点击按钮或链接,如何实现显示或隐藏、弹出对应的div层?飞龙这里举个简单的测试。主要包括4个组成部分。本日志更新网址:http://feilong.org/onclick-a-link-popout-div 飞龙第5次修订于20110604 ,希望对您有用! 飞龙提示:页面用utf-8编码!

一、点击什么?

点击a链接,可以是文字链,也可以是图片链接,当然也可以是用文字链接做的虚拟图片链。以下方式任选一种。

<a onclick="popfldiv();" href="#" class="clickthis">点击文字链弹出指定div层</a>
<a onclick="popfldiv();" href="#" class="clickthis"><img src="http://feilong.org/photos/logos/feilong-smallest.gif" alt="点击图片链弹出指定div层"></a>
<a onclick="popfldiv();" href="#" class="clickthis"><span>看是图片实际是文字</span></a>

二、弹出什么?

弹出的不是窗口,而是div层,因此html代码都在一个窗口内。弹出div后,其他页面元素半隐藏状态。最后给弹出的div加上一个关闭或返回链接。

<div class="flblog" id="fldiv" style="display:none;" >
<div class="hideother"></div>
<div class="showthis"><iframe src="http://feilong.org" class="flframe"></iframe></div>
<a onclick="popfldiv();" href="#" class="popback">关闭/返回</a>
</div>

以上弹出div内,放的是一个iframe,而iframe里调用第三方网页。这种方式,有点像直接点击链接到该网页的效果。

三、怎么弹出?

上面html代码onclick事件激活js函数 popfldiv(),它就是点击按钮或链接显示或隐藏div的方法。具体如下:

<script type="text/javascript">
function popfldiv(){
document.getElementById('fldiv').style.display=(document.getElementById('fldiv').style.display=='none')?'block':'none';// feilong.org/onclick-a-link-popout-div
}
</script>

飞龙建议你最好将js外置或放在页面尾部。

四、最后是与xhtml对应的css样式。如何让iframe居中显示,要点是:让iframe比popcont矮,iframe设置css padding-top

/*click on a link then pop out div feilong 20110511 */
.flblog{width:900px;height:700px;border:8px #966 solid;position:absolute;left:60px;top:60px;z-index:5;background:#00f;}
 
.hideother{width:1024px;height:900px;position:absolute;left:-68px;top:-68px;z-index:6;background:#000;
filter:alpha(opacity=50);/*IE*/opacity:0.5;/*Mozilla*/}
 
.showthis{width:900px;height:700px;border:8px #f60 solid;position:absolute;left:-8px;top:-8px;z-index:7;background:#0ff;overflow:auto;}
 
.flframe{width:850px;height:450px;border:0;overflow:auto;margin:110px 0 0 25px;}
.popback{position:absolute;right:30px;top:30px;width:114px;;color:#000;z-index:8;}

以上4步,就可以实现点击链接显示或隐藏div层。飞龙喜欢用文字链做图片按钮效果。弹出的窗口里,你可以不使用iframe,而直接把内容写在div层,那样更加符合seo的要求。如需要测试html文档,请联系飞龙,免费提供。

更新网址:http://feilong.org/onclick-a-link-popout-div
最初发布:20110511 04:23:29 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文:

飞龙前端QQ群