在網(wǎng)頁設(shè)計(jì)中，模態(tài)框是一個(gè)非常常見的元素。但是，當(dāng)我們需要隱藏模態(tài)框時(shí)，該怎么辦呢？這里介紹一種使用CSS設(shè)置模態(tài)框隱藏的方法。

.modal{
display:none; /*設(shè)置默認(rèn)為隱藏*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /*設(shè)置背景色及透明度*/
z-index: 1; /*設(shè)置層級(jí)*/
}
.modal-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: white;
border-radius: 5px;
padding: 20px;
}

以上代碼中，我們首先定義了一個(gè)名為“modal”的class，其中設(shè)置了display屬性為none，表示默認(rèn)情況下模態(tài)框是隱藏的。接下來，通過設(shè)置position屬性為fixed，可以使模態(tài)框框定位于頁面的正中央。因此，還需要設(shè)置top、left、right和bottom屬性為0，這樣可以讓模態(tài)框充滿整個(gè)頁面。同時(shí)，我們還通過設(shè)置background-color屬性和透明度，讓模態(tài)框的背景變?yōu)楹谏⑶野胪该鳌?/p>

接下來，我們定義了一個(gè)class為“modal-content”的div，其中設(shè)置了它的position屬性為absolute，讓它可以在父級(jí)元素的中央定位。我們通過設(shè)置transform: translate(-50%,-50%);將其上移了50%和左移了50%，這樣就可以讓它完美的居中顯示。其余的屬性設(shè)置使它具有更好的可讀性和美觀的外觀。

最后，當(dāng)需要顯示模態(tài)框時(shí)，我們只需要將其display屬性設(shè)置為block即可。比如：

.modal{
display: block;
}

這樣就可以讓模態(tài)框展現(xiàn)在用戶眼前了！