CSS酷炫Modal，是一種彈出式窗口，用于在網頁上展示內容，如表格、圖片等。Modal通常用于網頁中的注冊、登錄等功能，讓用戶可以在不離開當前頁面的情況下完成操作。
/* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
height: 80%;
overflow-y: scroll;
}
.modal-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.modal-close:hover,
.modal-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}以上是一個基本Modal的CSS代碼，其中.modal表示模態框，.modal-content表示模態框的內容，.modal-close表示關閉模態框的按鈕。
接下來是一個實現Modal的實例代碼：
以上代碼首先定義了一個打開Modal的按鈕，點擊按鈕會調用showModal()函數來顯示模態框；模態框內容通過HTML代碼定義，其中模態框的ID為myModal；模態框的關閉按鈕通過JavaScript代碼中的closeModal()函數來實現。
通過以上CSS和JavaScript代碼的結合，我們就可以實現一個簡單的Modal。如果需要更多的樣式和功能，可以在以上基礎上進行擴展。
上一篇css配置文檔模式
下一篇linaria css