点击按钮链接显示隐藏弹出div层
feilong.org 修订于2011-05-11 04:23:29 337 次浏览点击按钮或链接,如何实现显示或隐藏、弹出对应的div层?飞龙这里举个简单的测试。主要包括4个组成部分。本日志更新网址:http://feilong.org/onclick-a-link-popout-div 飞龙第5次修订于20110604 ,希望对您有用! 飞龙提示:页面用utf-8编码!
一、点击什么?
点击a链接,可以是文字链,也可以是图片链接,当然也可以是用文字链接做的虚拟图片链。以下方式任选一种。
点击文字链弹出指定div层
看是图片实际是文字
二、弹出什么?
弹出的不是窗口,而是div层,因此html代码都在一个窗口内。弹出div后,其他页面元素半隐藏状态。最后给弹出的div加上一个关闭或返回链接。
以上弹出div内,放的是一个iframe,而iframe里调用第三方网页。这种方式,有点像直接点击链接到该网页的效果。
三、怎么弹出?
上面html代码onclick事件激活js函数 popfldiv(),它就是点击按钮或链接显示或隐藏div的方法。具体如下:
飞龙建议你最好将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文档,请联系飞龙,免费提供。
更新网址:https://feilong.org/onclick-a-link-popout-div
最初发布:20110511 04:23:29 feilong.org 于广州
加入收藏夹,查看更方便。
所在分类: 网站开发