在 Bricks 主題中建置動態、可重用且支援 AJAX 的彈出模式 itchycode.com

彈出窗口構建器已在 Bricks 官方路線圖中，但不確定哪個更新將包含此內容，不用擔心，我們仍然可以構建自己的彈出窗口，通過使用一些簡單的 CSS 和 JavaScript，在 Youtube 或 Google 中有許多很好的免費教學，但是，我想在本教程中分享我創建可重用、更動態和 AJAX 兼容的彈出模式的方法。

教程環境設置

• Bricks 主題 v1.5 beta 是必須的 (我們使用 v1.5beta 中的一個很酷的輔助函數來獲取一些 CSS)
• WordPress 6.0
• PHP 7.4
• 打開 LiteSpeed 服務器
• 本教程中的所有自定義代碼 (PHP、JavaScript) 都放在子主題functions.php 中，您可以使用 WPCodeBox 或 Code Snippets 等其他插件來插入代碼。
• CSS 可以放在 Bricks > Settings >Custom Code > Custom CSS

概念

使用 CSS position fixed 或 absolute plus z-index 可以輕鬆創建一個簡單的彈出窗口，因此它將顯示在其他頁面元素的前面。到處都有成千上萬的教學。

當我們使用 Bricks 主題時，我將使用 Bricks 模板創建一個「標準」彈出窗口，然後我希望可以在任何頁面中嵌入或調用此彈出窗口，當然，這個「標準」彈出窗口中的內容將足夠動態，因此這將節省我的時間，而不是為不同的內容創建多個彈出模板。(我的標準彈出窗口意味著包裝器相同，位置相同，樣式相同)