您现在的位置是：网站首页> 编程资料编程资料
评论回复弹出遮罩效果实现思路兼容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.
偶有所得，以记录之，谨防忘记！
但是很少看到评论的回复。与是仔细寻找之，发现原来是通过一个页面的弹出遮罩来显示的。
与是仔细研究一翻，自己模拟出来一个，感觉还行，兼容ie 8/chrome/firefox.
思路：主页面和遮罩是两个不同的页面，遮罩通过iframe 利用js加载进来。
代码如下：
index.html
复制代码
代码如下:subiframe.html:
复制代码
代码如下:这里需要用一到滤镜。让加载来的遮罩保持透明.
1 np-popframe-bg-id 的作用主要是显示评论框的外部区域。当鼠标点击该区域的时候，移除iframe.
2 div 需要设置100%的高度，需要在前面加上 html,body{height:100%;}的css，否则无效
3 还有一点就是绝对定位的absolute.
偶有所得，以记录之，谨防忘记！
相关内容
- 使用火狐的web developer禁用网页样式图文详解_心得技巧_网页制作_
- wap页面之iphone设备字体偏大问题解决方法_心得技巧_网页制作_
- 让网站图片生成灰色效果的三种方法_心得技巧_网页制作_
- HTTP返回码大全（中英解释）_心得技巧_网页制作_
- 囚禁计划十万火急 房间4 图文流程攻略_手机游戏_游戏攻略_
- 囚禁计划十万火急 房间5 图文流程攻略_手机游戏_游戏攻略_
- 囚禁计划 房间8心电图上的Y轴数字密码是多少_手机游戏_游戏攻略_
- 无尽之剑3战斗技巧详解 全部宝藏地图一览_手机游戏_游戏攻略_
- 天天酷跑安卓版刷金币手动教程 天天酷跑高效手动刷金币攻略_手机游戏_游戏攻略_
- 疯狂的方言答案大全 河北方言全部答案汇总_手机游戏_游戏攻略_
