
在 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 模板創建一個「標準」彈出窗口,然後我希望可以在任何頁面中嵌入或調用此彈出窗口,當然,這個「標準」彈出窗口中的內容將足夠動態,因此這將節省我的時間,而不是為不同的內容創建多個彈出模板。(我的標準彈出窗口意味著包裝器相同,位置相同,樣式相同)
閱讀更多
Report Story
Leave Your Comment