div非弹出框半透明遮罩实现全屏幕遮盖css实现
IE浏览器下设置元素css背景为透明:
background-color: rgb(0, 0, 0);
filter: alpha(opacity=20);
非IE浏览器下设置元素css背景为透明:
background-color: rgba(0, 0, 0, 0.2);
兼容各类浏览器设置css背景为透明办法,即两者合并设置css:
(ie 不支持 rgba,所以rgba不会起作用)
background-color: rgb(0, 0, 0);
filter: alpha(opacity=20);
background-color: rgba(0, 0, 0, 0.2);
另:RGB与16进制色互转网站:http://11.1m86.com/
1.弹出框默认状态下是隐藏的,当点击弹出按钮时,显示该弹出框,如下:
<div class="modal" style="display: none;"> </div>
2.控制弹出框显示的遮罩层CSS(遮罩整个屏幕,即添加一个灰色背景遮罩层)如下:
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; outline: 0; -webkit-overflow-scrolling: touch; background-color: rgb(0, 0, 0); filter: alpha(opacity=60); background-color: rgba(0, 0, 0, 0.6); z-index: 9999; }