飞龙博客

feilong.org 前端开发教程

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

飞龙修订于 20110511 04:23 70 次浏览

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

一、点击什么?

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

点击文字链弹出指定div层
点击图片链弹出指定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

想学前端?长按二维码加我微信

想学前端?点击飞龙QQ

分类: 网站开发

新作:

旧文:

关闭

长按二维码 -> 识别图中二维码

打开微信,发现,扫一扫

支付完成后,点击下一步

感谢大力支持

然后你手机号:

最后点这,稍等即可