建立固定定位的彈出視窗

我們在這裡指導您製作一個稍微獨特的彈出視窗 - 由用戶啟動的彈出視窗。使用者透過點擊按鈕觸發彈出動畫，顯示表單。 （您始終可以根據您的要求修改觸發器。）

您將在本教程中學到什麼：

1. 建構固定模態
2. 將按鈕整合到您的專案中
3. 配置彈出觸發器
4. 組織彈出動畫
5. 配置關閉動畫

建構固定模態

若要為您的內容建立疊加層，您可以按照以下 3 個步驟操作：

1. 開發一個彈出包裝器
2. 包含表單元素
3. 建立“關閉”連結

開發一個彈出包裝器

要插入一個 分區塊 作為模式的包裝器，使用鍵盤快速鍵 A 訪問 新增面板 （或點擊左上角的加號圖示）並拖曳 分區塊 元素到您的項目。

為了更好地組織您的項目，請將 分區塊 位於 Body 元素的頂部（雖然不是強制性的，但這種做法有助於組織元素）。將元素拖入 航海家 並將其放置在 身體元素.

選擇 分區塊，為其分配一個類別名，例如“Pop-upwrapper”，並在 風格面板:

• 顯示： 柔性
• Flex 版面：vertical、center、center（讓表單垂直居中）

捲動瀏覽 風格面板 配置其他樣式設置，確保包裝器佔據整個視圖：

• 位置：固定、完整
• Z-index：9999（將包裝器放置在專案中所有其他元素之上）

應用背景顏色以使彈出視窗從項目中的其餘內容中脫穎而出。嘗試使用 #000000 和 80% 不透明度 - 或任何其他適合您專案的背景顏色。

包含表單元素

要彈出帶有表單的窗口，您需要 形式 包裝器內的元素。

選擇包裝紙，插入 形式 使用快速尋找功能：

1. 按 指令+E （在 Mac 上）或 控制+E （在電腦上）
2. 搜尋“表格”
3. 選擇 形式 元素並將其放置在“彈出包裝器”中（由於包裝器上先前的樣式， 形式 將利用 Flexbox 進行居中）
4. 設計適合您專案的表單（例如，將最大寬度限制為 500 像素並將寬度設為 100%）

透過組合這些樣式，您的表單被限制在 500 像素（最大寬度）內，同時能夠回應各種裝置尺寸（100% 寬度）。了解有關 Webflow 中響應式設計的更多資訊。

建立“關閉”連結

接下來，讓我們插入一個文字鏈接，供用戶在提交表單後關閉彈出視窗。

要實現此目的，請拖曳 文字連結 在裡面 航海家 到我們的「彈出包裝器」的頂部（再次強調，雖然不是強制性的，但這種做法有助於組織元素）。

選擇連結後，為連結指派一個類別名稱（例如，彈出視窗關閉）並套用一些樣式：

• 立場：絕對
• 頂部：5%
• 右：5%
• 底部：自動
• 左：自動

透過利用這組樣式，您可以將緊密連結保持在彈出包裝的頂部。

至此，彈出視窗的所有元素都已建立。繼續將“Pop-upwrapper”的顯示樣式更改為 沒有任何 以便在不使用時隱藏它。

使「彈出包裝器」0% 不透明，這將為您在互動時創建平滑的淡入動畫做好準備。

在您的專案中插入一個按鈕

項目設定的最後一步涉及添加一個元素（例如按鈕）以在單擊時觸發彈出視窗。 

要合併按鈕：

1. 按 A 在鍵盤上訪問 新增面板 （或點選設計器左上角的+圖示）
2. 拖曳一個 按鈕 元素到專案中所需的位置

配置彈出觸發器

將按鈕新增至項目後，您現在可以建立互動以在單擊按鈕時觸發彈出視窗。

過去，互動涉及複雜的 JavaScript 函式庫，需要各種工具、外掛程式和大量的編碼學習曲線。使用 Webflow，我們可以直觀地建立彈出互動。

首先，選擇畫布上的按鈕。隨後，按一下“交互”符號以顯示“交互”面板

內 交互作用 面板，點擊 + 圖標 元素觸發，然後選擇 滑鼠點擊 選擇。

設定彈出動畫

雖然 Webflow 提供了一些預設交互，但您將建立自訂交互來展示彈出視窗。單擊該按鈕後，您的彈出視窗將逐漸淡入。為了實現這一目標——下 第一次點擊時 - 選擇 行動 下拉式選單並選擇 開始動畫 選項。隨後，按 + 圖示以合併我們的定時動畫

現在，您可以為動畫指定名稱（例如，彈出視窗），然後選擇您想要設定動畫的元素。 

筆記：確保在「互動」面板處於活動狀態時選擇該元素。

對於此項目，從以下位置選擇“彈出包裝器”元素 航海家。隨後，點擊旁邊的 + 圖標 行動，然後選擇 不透明度 （這將最初設定不透明度狀態）。

首先，讓我們考慮一下時序（注意麵板底部的時序顯示）。首先激活 設定為初始狀態 切換，並將值分配給 0%.

接下來，選擇附近的 + 符號 行動，然後選擇 隱藏/顯示 （顯示隱藏的彈出視窗 - 其不透明度保持隱藏）。確保設定 展示 作為 柔性.

要完成最後一個任務，請將不透明度從 0% 轉換為 100%。若要執行此操作，請選擇旁邊的 + 符號 行動，然後選擇 不透明度 （自動調整為 100%）。

最後，點擊 完畢 按鈕，然後繼續發布項目。現在點擊按鈕，您的彈出視窗就會出現。雖然，你還不能關閉它；因此，在「彈出關閉」連結上建立互動。

準備關閉動畫

要建立關閉交互，首先，將「彈出關閉」連結作為目標 航海家.

隨後，介紹點擊連結後關閉彈出視窗的互動。 

按著這些次序：

1. 點選 交互作用 圖示揭開 交互作用 控制板
2. 選擇 滑鼠點擊 選項
3. 來自 行動 下拉式選單，選擇 開始動畫
4. 然後，透過點擊 + 符號來新增定時動畫
5. 為您的動畫新增標籤（例如，關閉彈出視窗）
6. 在裡面 交互作用 面板中，反白顯示“彈出包裝器”元素 航海家
7. 包括 不透明度 透過選擇旁邊的 + 圖示來選項 行動
8. 將不透明度調整為0%
9. 透過選擇旁邊的 + 圖示新增另一個操作 行動，然後按一下 隱藏/顯示
10. 選擇 沒有任何 內 展示 環境

最後，點擊 完畢 按鈕，然後重新發布項目以測試彈出視窗。

在開發固定位置的彈出視窗方面做得非常出色。做得好！