Weber更新日誌

組件概述

彈窗是觸發後浮於頁面內容的組件，可在特定觸發時機彈出內容，蓋在原本頁面之上，背景會自動產生遮罩層。

組件結構：默認情況下，組件包含【按鈕】組件，作為觸發彈窗的媒介

適用場景

1、點擊按鈕開啟報名 / 諮詢表單

2、網站進站公告、促銷優惠提示

3、簡短影片播放視窗

4、簡短確認提示、資訊說明視窗

不建議使用場景

1、超長大量內容（長文章、大量圖片，彈窗內滾動閱讀體驗差，建議跳轉新頁）

2、多層嵌套彈窗（彈窗內再開啟另一個彈窗，容易造成互動混亂）

3、大量複雜計算、多步驟長表單（內容過多容易超出彈窗視界）

組件使用

1、在編輯器右側【設置】中打開【顯示彈窗】功能，才可以調整彈窗內容

2、彈窗有【點擊】和【即時】觸發兩種方式。（注意：默認為【點擊】觸發，可以在編輯器右側【設置】中開啟【立即顯示】）

3、在【彈窗容器】內可以添加任意組件。（注意：不建議添加大型組合組件，如輪播圖、選項卡等）

4、選中【Modal Wrapper】層級，可以調整遮罩層的顏色和透明度

5、選中【彈窗容器】層級，可以調整彈出框整體尺寸比例

6、選中【彈窗信息】層級可在Class中調整邊框、圓角、背景顏色等

7、彈窗的觸發媒介可以替換，默認為【按鈕】組件，有需求可以替換成圖片、圖標、文本等基礎組件，觸發媒介只能是單一基礎組件。（注意：不允許使用複雜的【組合組件】作為觸發媒介，容易出現錯亂）

8、【Modal Body】層級是承載新增組件的容器，可以調整【內部留白】。（注意：【Modal Header】層級也要根據Modal Body的【內部留白】相應調整）

9、默認彈窗內自帶【標題】組件，可以自由刪除，也可替換成【圖標文本】組件。（注意：刪除後需要在【Modal Header】層級調整【關閉】按鈕位置，Class的【彈性佈局】➡️【主軸對齊】➡️【靠右對齊】）

10、【關閉】按鈕層級可以調整尺寸、顏色、背景、邊框等樣式

注意事項

1、內容較多時，在【Modal Wrapper】層級會出現滾動條

2、自動彈窗容易影響使用者體驗，在【即時】觸發時注意【時間間隔】設置

3、彈窗內可以放入表單組件，但要留意移動端測試效果

進階使用

【Modal Header】層級內添加多個組件

1、添加多個組件需要先添加一個【Div】組件作為多組件的容器，需要添加的組件必須放在Div內

2、選中【Modal Header】層級在【彈性佈局】中的【間距】可控制【Div】與【關閉】之間的距離