点击按钮链接显示隐藏弹出div层 (555)
点击按钮或链接，如何实现显示或隐藏、弹出对应的div层？飞龙这里举个简单的测试。主要包括4个组成部分。本日志更新网址：http://feilong.org/onclick-a-link-popout-div 飞龙第5次修订于20110604 ，希望对您有用! 飞龙提示：页面用utf-8编码！
一、点击什么？
点击a链接，可以是文字链，也可以是图片链接，当然也可以是用文字链接做的虚拟图片链。以下方式任选一种。
|
1 2 3 |
<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加上一个关闭或返回链接。
|
1 2 3 4 5 |
<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的方法。具体如下：
|
1 2 3 4 5 |
<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
|
1 2 3 4 5 6 7 8 9 10 |
/*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文档，请联系飞龙，免费提供。
本文更新网址：https://feilong.org/onclick-a-link-popout-div
2011-05-11 ~ 2011-05-11
加入收藏夹，查看更方便。
分类： 网站开发