您现在的位置是：网站首页> 编程资料编程资料
评论回复弹出遮罩效果实现思路兼容ie 8/chrome/firefox_心得技巧_网页制作_
2021-08-29
2029人已围观
简介 腾讯网的评论的回复效果是通过一个页面的弹出遮罩来显示的，经研究自己模拟出来一个，感觉还行，兼容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返回码大全（中英解释）_心得技巧_网页制作_
- 分享13款优秀的网页线框图设计和制作工具_心得技巧_网页制作_
- html5中几个不容错过的api或者tips小结_心得技巧_网页制作_
- impress.js表现层框架(演示工具)-初体验_心得技巧_网页制作_
- CSS(Cascading Style Sheet)级联样式表常用术语总结_心得技巧_网页制作_
- 爱上朴实的CSS细节虽不起眼可提高效率_心得技巧_网页制作_
- iframe在IE6下出现横向滚动条的解决方案 _心得技巧_网页制作_
