您现在的位置是:网站首页> 编程资料编程资料

评论回复弹出遮罩效果实现思路兼容ie 8/chrome/firefox_心得技巧_网页制作_

2023-10-07 355人已围观

简介 腾讯网的评论的回复效果是通过一个页面的弹出遮罩来显示的,经研究自己模拟出来一个,感觉还行,兼容ie 8/chrome/firefox

平日喜欢关注一些新闻,经常会浏览腾讯网!

但是很少看到评论的回复。与是仔细寻找之,发现原来是通过一个页面的弹出遮罩来显示的。

与是仔细研究一翻,自己模拟出来一个,感觉还行,兼容ie 8/chrome/firefox.

思路:主页面和遮罩是两个不同的页面,遮罩通过iframe 利用js加载进来。

代码如下:

index.html

复制代码
代码如下:






append-iframe









subiframe.html:

复制代码
代码如下:






Document










这里需要用一到滤镜。让加载来的遮罩保持透明.

1 np-popframe-bg-id 的作用主要是显示评论框的外部区域。当鼠标点击该区域的时候,移除iframe.

2 div 需要设置100%的高度,需要在前面加上 html,body{height:100%;}的css,否则无效

3 还有一点就是绝对定位的absolute.

偶有所得,以记录之,谨防忘记!

-六神源码网