2024-05-26 CSS black overlay

發表於 分類於 閱讀次數：
CSS black overlay 黑色半透明遮罩 做法

2024-05-26 CSS black overlay

CSS black overlay 黑色半透明遮罩 做法

在modal 彈出視窗的最外層，需要有一個固定遮罩

1
2
3
4
5
6
<div class="modal_wrap">
    <div class="modal" id="login-modal">
        .....
        .....
    </div>
</div>

modal_wrap 類別選擇器(Class selector) 的設定

1
2
3
4
5
6
7
8
9
10
11
12
.modal_wrap{
    display:none;
    position: fixed;
    z-index: 1; /*層疊在最上層*/
    padding-top: 100px;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);  /*黑色半透明遮罩*/
}