栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS

评论回复弹出遮罩效果实现思路兼容ie 8/chrome/firefox

Html/CSS 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

评论回复弹出遮罩效果实现思路兼容ie 8/chrome/firefox

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

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

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

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

代码如下:

index.html

复制代码代码如下:





append-iframe

html,body{height:100%;padding:0px;margin:0px;}









subiframe.html:

复制代码代码如下:





document

html,body{height:100%;padding:0px;margin:0px;}
.np-popframe-bg-opacity{
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.wrapper{
position: absolute;
border:1px solid red;
width:800px;
height: 800px;
background: #fff;
top:1000px;
left:500px;
}










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

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

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

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

偶有所得,以记录之,谨防忘记!
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/217914.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号