CSS寫彈窗是一種非常常見的前端技術(shù)，可以幫助我們?cè)诰W(wǎng)站中實(shí)現(xiàn)各種彈窗效果，例如展示重要信息、添加、編輯、刪除操作的確認(rèn)等等。下面我們將介紹如何使用CSS寫彈窗。

.dialog-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: none;
}
.dialog-wrapper {
position: fixed;
top: 50%;
left: 50%;
z-index: 101;
transform: translateY(-50%) translateX(-50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
text-align: center;
display: none;
}
.dialog-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.dialog-content {
font-size: 16px;
margin-bottom: 20px;
}
.dialog-buttons {
display: flex;
justify-content: center;
align-items: center;
}
.dialog-button {
font-size: 18px;
font-weight: bold;
margin: 0px 10px;
padding: 10px 20px;
color: #fff;
background-color: #0066cc;
border-radius: 5px;
cursor: pointer;
}
.dialog-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #aaa;
cursor: pointer;
}

以上為必要的CSS樣式，接下來我們來看看如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的彈窗。

彈窗標(biāo)題
彈窗內(nèi)容
確定取消
??
var dialogBackdrop = document.getElementById("dialog-backdrop");
var dialogWrapper = document.getElementById("dialog-wrapper");
function openDialog() {
dialogBackdrop.style.display = "block";
dialogWrapper.style.display = "block";
}
function closeDialog() {
dialogBackdrop.style.display = "none";
dialogWrapper.style.display = "none";
}
dialogBackdrop.addEventListener("click", closeDialog);
document.querySelector(".dialog-close").addEventListener("click", closeDialog);
document.querySelector(".dialog-buttons").addEventListener("click", function(event) {
if (event.target.className === "dialog-button") {
closeDialog();
}
});

通過以上的代碼，我們成功實(shí)現(xiàn)了一種簡(jiǎn)單的彈窗效果，并且具備打開、關(guān)閉、確定、取消操作的功能。

CSS寫彈窗不僅僅是本文所講述的這樣一種方式，還有很多不同的實(shí)現(xiàn)方式可以從不同的角度出發(fā)實(shí)現(xiàn)更加豐富的效果。希望這篇文章能夠幫助大家更好地理解CSS寫彈窗的方式以及實(shí)現(xiàn)步驟。