CSS3模態窗口是現代網頁設計中常用的一種交互方式，它可以在當前頁面上方彈出一個居中且覆蓋整個窗口的對話框。這種對話框可用于多種用途，例如用戶登錄、圖像、視頻或表格展示、提示信息、友好的確認或警告信息等。

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
max-width: 80%;
max-height: 80%;
overflow: auto;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
}
.close-btn {
font-size: 18px;
font-weight: bold;
color: #222;
cursor: pointer;
}
.modal-body {
margin-top: 10px;
}
.modal-footer {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
.btn {
border: none;
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #0069d9;
}

在上面的代碼中，我們首先創建了一個