網頁 Lightbox 燈箱效果製作教學

Author: Kelvin Huang

燈箱（Lightbox）效果是 HTML 網頁設計上用於顯示圖片、影片或其他內容的視覺效果，當使用者點擊某個圖片或文字時，彈出覆蓋整個頁面的對話框，並將背景變暗讓使用者可以專注於內容。這種方式常見於圖片畫廊、產品展示或影片播放。

增強視覺體驗：讓使用者可以更清楚地檢視內容。

響應式設計：可適應不同裝置（電腦、手機、平板），提升使用者體驗。

提升專注度：網頁背景變暗，避免分心，提高內容可讀性和可視性。

減少跳轉頁面：燈箱效果通常不需要重新載入頁面，提升使用者體驗與瀏覽流暢度。

適用多種內容：不僅可用於圖片，也可適用於影片、表單、文字訊息…等多種元素。

網頁設計上有多種方法可製作燈箱效果，本教學展示使用 HTML + CSS + JavaScript 和使用 Lightbox.js 插件的方式。

方法 1 使用 HTML + CSS + JavaScript 製作

方法 2 使用 Lightbox.js 製作（更強大且方便）

Lightbox.js 是一個流行的開源燈箱庫，可以輕鬆地為圖片添加燈箱效果。在 HTML 引入 Lightbox.js