CSS实现弹窗背景半透明效果
IE:
background-color: rgb(0, 0, 0);
filter: alpha(opacity=20);
非IE:
background-color: rgba(0, 0, 0, 0.2);
兼容:
background-color: rgb(0, 0, 0);
filter: alpha(opacity=20);
background-color: rgba(0, 0, 0, 0.2);
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;
}
s'd's'd's