[筆記] 理想中的 HTML Modal 切版作法

近期在製作 Modal 的元件公版時,想說看有沒有近乎 Best Practice 的作法。這邊筆記下當前 2024 年的個人技術所能實踐的最佳成果。

html logo


內容

1. modal 最外框一定要掛於 <body> 的第一層下,並設置 position: absolute、 z-index 和 inset
藉由將 inset 設置為 0,可以讓這個 modal 確保一定和 <body> 寬高一樣

2. modal 內分為兩個 <div> 分別為 Overlay 和 Content。
Overlay 一樣設置 position: fixed, z-index 和 inset,確保這個 Overlay 會和 Modal 一樣寬高。同時 z-index 要比 modal 最外框大
Content 就視情況決定高度,並注意 z-index 要比 Overlay 大。同時你也可以補上 overflow: scroll 來確保捲軸可以順利出現

3. Contnent 先有一層 wrapper <div>,並設置 display: flex, flex-direction: column, width: 100% 和 height: 100%
這個 wrapper <div> 可以確保其內的區塊能夠有妥善的分散分配 ( 預設是 justify-content: flex-start )

4. Content wrapper <div> 內的三個區塊 ( Header, Core 和 Footer ) 要寫死高度。
Header、Footer 的高度決定後,剩餘的就是 Core。不過 Core 的高度要考量到 Header, Footer 所推的 Margin
Core 的核心區塊需要搭配 flex flex-wrap h-full justify-center overflow-y-auto。若你是使用 align-items: start,那你就無需擔心捲軸出現時,內容會有被遮擋的現象。若你有 align-items: center 的需求,那就得看你的內容量,並用 window.resize 監聽器來決定你在某一個 height 以下時,要改為 align-items: flex-start


程式碼


參考資料

  1. 1. [CSS] 使用 inset 簡化 position 後的定位設定
按讚加入粉絲團