CSS 中的 modal 屬性用于創建一種可以覆蓋整個頁面的彈出窗口，主要用于顯示重要的信息或交互提示。實現 modal 窗口的關鍵在于使用 CSS 中的 position 和 z-index 屬性。

/* 創建 modal 窗口的樣式 */
.modal {
position: fixed; /* 使 modal 窗口固定在頁面上 */
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999; /* 使 modal 窗口浮于頁面上方，保證覆蓋整個頁面 */
background-color: rgba(0, 0, 0, 0.5); /* 設置半透明遮罩層 */
display: flex; /* 使用 flex 布局實現模態框居中顯示 */
justify-content: center;
align-items: center;
}
/* 隱藏 modal 窗口 */
.modal-hidden {
display: none;
}

創建 modal 窗口的樣式包括 position、top、bottom、left、right、z-index 和 background-color 屬性。其中 position 屬性的值為 fixed，使 modal 窗口固定在頁面上方，不隨頁面滾動。top、bottom、left、right 屬性值都為 0，使 modal 窗口覆蓋整個頁面。z-index 屬性值設置為一個較大的數，以使 modal 窗口浮在頁面上方，保證覆蓋整個頁面。background-color 屬性值為 rgba，即半透明的顏色，用于實現遮罩層效果，使頁面不可被操作。

對于 modal 窗口中需要填寫的內容，可以按照普通的 HTML 格式設計，放在 modal 窗口的中間位置。通過 display 屬性和 flex 布局，使 modal 窗口的內容居中顯示。

當 modal 窗口不需要顯示時，可以將其 display 屬性設置為 none，即隱藏 modal 窗口。在 JavaScript 中，可以通過改變 CSS 類名的方式來控制 modal 窗口的顯示和隱藏。例如，將 modal 窗口的類名從 modal 改為 modal-hidden，即可隱藏 modal 窗口。