透明遮罩层 垂直居中的div 内容不透明

---

文章目录

• 透明遮罩层
• 原来是父级 div id="nav_img_ios" 搞的鬼

---

因为没有新增 css 类别,所以关于css 的东西暂时归类到了 Html5

今天干活遇到的几个问题,下班前和大家分享

• 透明遮罩层
• 居中内容不透明
• 居中div显示内容

---

因为我的html5页面只在手机端展示,所以不考虑万恶的IE低版本浏览器

并且我把单独的css内容直接定义在html 标签里,这样你们看起来更加直观

---

透明遮罩层

<div  id="nav_img_ios" style="display:none;height:100%; width:100%; 
position:fixed; _position:absolute; top:0; z-index:100;background:#000;filter: alpha(opacity=60);z-index:1000;opacity: 0.6; ">
   <div id="qrcontainer" style="position:absolute;z-index:100;width:191px;height:310px;display:none;background-color: white;">
   <div id="qr" style="padding:10px;margin:0 auto;">
       
   </div>
   <div id="describe">
       <label style="padding-left: 6px;line-height: 33px;">长按图中二维码进行下载</label>
       <p style="color:#A0A0A0;padding-top:8px;margin-top:8px;border-top: solid 3px #E3E3E3;width:171px;margin:0 auto;">
           如果不能正常下载,点微信右上角按钮,在浏览器中打开后下载
       </p>
   </div>
   </div>
</div>

说明

div id="nav_img_ios" 是遮罩层,从左上侧 top:0 left:0 的位置 100% 屏幕整个屏幕
div id="qrcontainer" 是遮罩层中间填充内容的部分
div id="qr" 是一个二维码容器,里面是 javascript自动生成二维码 的填充容器
div id="describe" 是二维码下面的一段描述文本

##我们看下上面展示的效果

这个效果明显不是我们想要的,二维码后面的div 竟然也是透明的,把底部 footer 里面的文字印过来了 "加载更多回复"

##下面我们来改造中间内容 div id="qrcontainer" 让他不要透明

仔细浏览下 qrcontainer div 里面的样式内容,貌似我们也没有定义透明,为啥这层也透明了?

---

原来是父级 div id="nav_img_ios" 搞的鬼

在css 中,如果父级div 设置了 opacity ,filter 等属性,那么他的子dom 将全部被透明化,就算你绝对定位把他移到十万八千里,照样透明.
看来我们还得从父级 div 的样式来入手.

其实我们要设置遮罩层透明,只要指定他的背景透明即可,设置背景透明的还有另外一种属性 rgba
下面我们把 父级div 的样式改造如下

<div  id="nav_img_ios" style="display:none;height:100%; width:100%; 
position:fixed; _position:absolute; top:0; z-index:100; background:rgba(0,0,0,0.6);">

</div>

上面我们把 background:#000;filter: alpha(opacity=60);z-index:1000;opacity: 0.6; 替换成了 background:rgba(0,0,0,0.6);

再来看下效果:

上面才是我们要的效果

所以在设置背景透明的时候,尽量避免使用 opacity 属性,取而代之使用 rgba 属性

rgba 属性使用

rgba(x1,x2,x3,y)
x1,x2,x3 的取值范围是 0-255 的颜色值
y 是这是透明度 (0-1之间) (0， 0.1， 0.2， 0.3， 0.4， 0.5， 0.6， 0.7， 0.8， 0.9， 1)

##最后一块内容

如何让一个div 动态居中(不论你的滚动条如何滚动,此div 永远在你可视屏幕的中间)

这个效果我们使用 jquery 来完成
原理就是实时计算 屏幕高度,滚动位置,页面高度 ,然后计算出一个 top ,left 值 ,赋给 div id="qrcontainer" 元素.

定义一个方法,自动计算上面的值,并且给 容器 div id="qrcontainer" 动态写入 style

function popup_middle(popupID){
 var _scrollHeight = $(document).scrollTop(),//获取当前窗口距离页面顶部高度
  _windowHeight = $(window).height(),//获取当前窗口高度
  _windowWidth = $(window).width(),//获取当前窗口宽度
  _popupHeight = popupName.height(),//获取弹出层高度
  _popupWeight = popupName.width();//获取弹出层宽度
  var _posiTop = (_windowHeight - _popupHeight)/2 + _scrollHeight;
  var _posiLeft = (_windowWidth - _popupWeight)/2;
  popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position
}

出自:透明遮罩层 垂直居中的div 内容不透明

如何调用?
popup_middle($("#qrcontainer"));
上面的代码调用了居中显示div 的方法,传入参数是一个 jquery 对象