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