CSS中可以很方便地設置模態(tài)框（Modal）來顯示一些需要用戶關注的內容，例如備忘錄、警告信息等。

以下是我們所創(chuàng)建的一個基本模態(tài)框的CSS樣式：

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

在上面的示例中，.modal表示整個模態(tài)框的基本樣式，包括了固定的寬度、高度、位置與背景色等屬性。而.modal-content則為模態(tài)框的內容容器，包含了一些用來美化外觀的邊框、填充和背景色等屬性。.close類則表示在模態(tài)框中關閉按鈕的樣式。

當我們使用JavaScript來實現(xiàn)打開或是關閉模態(tài)框時，還需要額外定義以下代碼，來指定模態(tài)框的可見性：

.modal {
display: none;
}
.show {
display: block;
}

在上述的代碼中，我們?yōu)?modal定義了display:none的默認屬性。當我們需要打開模態(tài)框時，可以為它添加show類，從而顯示出模態(tài)框。