# Modal
###### tags: `Component`
## 一 . 基本版型
### (一) . 成果圖和分析
- 功用 ：
1. 可以是event trigger觸發的一個提示框。
2. 跳出後可以使用按下背景，或提示框內的部分元件關閉。
- 分析 ：
1. 第一點 ： 按下後背景固定，出現一個置中提示框。
- 需要一個充滿整個螢幕的背景框，且可以消去 : 『display:none -> block』、『position:fixed』。
- 需要一個置中的屬性控制內元素 : 『display:flex』。
- 需要兩個背景兩個內景容器，去達成兩個要求。
2. 第二點 ： 中間的提示框，通常必有『header和body和footer』，可以視為card的佈局。

### (二) . 實作一 ： 背景處理
#### 1. 概念 ： 使用兩個背景容器。
- 第一個放在最外層，控制整個modal的出現和關閉。
- 第二個放在第二層，控制內部card的排版。
#### 2. 第一層實作 ：
- css屬性：
1. display控制modal出現。
2. fixed屬性將modal出現時固定在螢幕的位置。
3. top和高寬屬性將元素滿版。
4. 背景屬性 : 控制顏色效果，記得加入透明度。

.modal{
    display: none;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    
    background-color: rgb(61, 60, 60,0.4);
}

- Js控制 : modal出現需要用加入js選取內容。
1. modal外部設定一個trigger function。
2. modal設定id元素以供外部選取。
3. 使用bubble機制控制modal的關閉。

<button onclick='triggerModal()'>Push</button>
<div class='modal' id='modal'></div>

function triggerModal(){
    let modal=document.getElementById('modal');
    modal.style.display="block";
}
window.onclick = function(event) {
    if (event.target == modal) {
      console.log('window')
      modal.style.display = "none";
    }
}

#### 2. 第二層實作 ：
- 背景處理排版。
1. 用flex屬性排版。
2. 可以將元素置中，或做其他設定。
3. 高寬滿版，與第一層背景合再一起。
- $pointer-events$ 屬性 :
1. 因為js函式設定的是按到modal引發的bublle會觸發關閉modal。
2. 一般設定下，第二層滿版第一層，按下第二層不會觸發第一層的設定。
3. 這個設定可將一般預設去除，讓上層元素的案件事件可以同時觸發下層的。

.modal-dialog{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%; 

   pointer-events: none;
}

### (三) . 實作二 ： card處理
#### 1. 概念 ： modal提示框就是card的一個例子
- card部分 ：
1. 通常會包含三個子部分：『header、body、footer』。
2. 通常會定寬，設定max高和overflow。
- header部分 ： 通常包含兩個小元素
1. title :
2. 關閉符號 :
- footer部分 : 尾端有一群按鈕。
1. 有一個關閉的按鈕。
2. 或是其他連結功能的按鈕。
#### 2. card實作：
- 定寬 ：
1. 因為card元素上一層就是背景，不會想要和背景滿版。
2. 設定為固定寬度的modal，也比較符合現在框架的架構。
- 最大高和overfolw ：
1. 因為modal裝的內容能很多。(通常應該是body)
2. 但不會想要讓modal超過螢幕大小。
3. 所以設定最大高和overfowg屬性。
- padding處理 ：
1. 因為希望header和footer的分割線可以滿版。
2. 所以不設card的padding。

#### 3. header實作 ：
- 排版 ：
1. 因為modal的header通常只會裝兩個子元素。
2. 所以用flex和特殊屬性排版，同常用space-between。
3. 可以將字體的處理只定給modal-tile的class。
- padding和border處理 ：

#### 4. footer處理 ：
- 排版 ：
- border處理 ：

### (四) . 基本版型總結

## 二 . 改良版型 ： overflow限制於modal-body