對(duì)話框是web開(kāi)發(fā)中常用的元素之一，它可用于展示信息、提示用戶(hù)操作，或者與用戶(hù)進(jìn)行交互。CSS規(guī)定定義了幾種不同類(lèi)型的對(duì)話框，我們可以根據(jù)需要選擇合適的類(lèi)型。

模態(tài)對(duì)話框

.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 5px;
}

模態(tài)對(duì)話框是一種阻止用戶(hù)操作頁(yè)面其他元素的對(duì)話框。它一般會(huì)使用半透明的背景色覆蓋整個(gè)頁(yè)面，以突出顯示對(duì)話框內(nèi)容，并且需要一個(gè)“關(guān)閉”按鈕讓用戶(hù)關(guān)閉對(duì)話框。

非模態(tài)對(duì)話框

.dialog {
position: absolute;
z-index: 1;
top: 100px;
left: 50%;
transform: translateX(-50%);
width: 400px;
background-color: white;
padding: 20px;
border-radius: 5px;
}

非模態(tài)對(duì)話框不會(huì)影響頁(yè)面其他元素的操作。它一般會(huì)出現(xiàn)在頁(yè)面中央或者離某個(gè)元素比較近的位置，用于展示一些與頁(yè)面內(nèi)容相關(guān)的信息。

通知框

.notification {
position: fixed;
z-index: 1;
top: 20px;
right: 20px;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

通知框可以用來(lái)展示一些臨時(shí)性的信息，如新消息、操作成功等。它通常會(huì)位于頁(yè)面的某個(gè)角落，并且一般會(huì)帶有消失的動(dòng)畫(huà)效果。