近期在製作 Modal 的元件公版時，想說看有沒有近乎 Best Practice 的作法。這邊筆記下當前 2024 年的個人技術所能實踐的最佳成果。
內容
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
