AJAX 設計模式深度解析：Lightbox 視覺聚焦與實作演進

什麼是 Lightbox

Lightbox (燈箱)：以半透明遮罩層覆蓋頁面其餘區域，中央顯示聚焦內容 (圖片、表單、訊息)，強制使用者在關閉前完成互動。視覺效果類似 Windows 登出/關機對話框。

• 核心作用：模態 (Modal) 互動、視覺聚焦、防止誤操作。
• 前身：IE 專有 showModalDialog()、早期「Inline Popup」繞過彈窗攔截器。

經典實作演進史

核心實作要素 (原生 JS 版)

// HTML 結構


// CSS 關鍵
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.lightbox-overlay:not([hidden]) { opacity: 1; pointer-events: auto; }
.lightbox-content { background: white; padding: 1.5rem; border-radius: 8px; max-width: 90vw; max-height: 90vh; overflow: auto; transform: scale(0.9); transition: transform 0.2s; }
.lightbox-overlay:not([hidden]) .lightbox-content { transform: scale(1); }

// JS 控制器
class Lightbox {
  constructor() {
    this.overlay = document.getElementById('overlay');
    this.title = this.overlay.querySelector('#lb-title');
    this.body = this.overlay.querySelector('.lightbox-body');
    this.closeBtn = this.overlay.querySelector('.lightbox-close');
    this._prevFocus = null;
    this._bindEvents();
  }
  _bindEvents() {
    this.closeBtn.onclick = () => this.hide();
    this.overlay.onclick = e => { if (e.target === this.overlay) this.hide(); };
    document.addEventListener('keydown', e => { if (e.key === 'Escape') this.hide(); });
  }
  show(title, html) {
    this._prevFocus = document.activeElement;
    this.title.textContent = title;
    this.body.innerHTML = html;
    this.overlay.hidden = false;
    document.body.style.overflow = 'hidden'; // 防止背景滾動
    this.closeBtn.focus(); // 焦點陷阱起點
    this._trapFocus();
  }
  hide() {
    this.overlay.hidden = true;
    document.body.style.overflow = '';
    this._prevFocus?.focus(); // 歸還焦點
  }
  _trapFocus() {
    const focusable = this.overlay.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
    const first = focusable[0], last = focusable[focusable.length - 1];
    this.overlay.addEventListener('keydown', e => {
      if (e.key !== 'Tab') return;
      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
    });
  }
}

// 使用
const lb = new Lightbox();
document.getElementById('open-btn').onclick = () => lb.show('確認刪除', '
確定要刪除此項目嗎？
取消確定');

無障礙 (A11y) 必檢清單

1. role="dialog" + aria-modal="true"。
2. aria-labelledby 指向標題。
3. 焦點陷阱 (Focus Trap) + Esc 關閉。
4. 關閉後焦點歸還觸發元素。
5. 背景 aria-hidden="true" 或 inert 屬性 (現代瀏覽器支援)。

進階模式與變體

效能與體驗優化

• 懶載入：內容區 IntersectionObserver 或點擊時才 fetch 載入。
• 動畫幂性：transform: scale/translate + opacity 觸發 GPU 加速。
• 減少重排：遮罩與內容容器分離，避免大範圍 Layout Thrashing。
• 預渲染常用 Modal**：登入框、購物車等高頻組件啟動時掛載隱藏節點。

總結

Lightbox 從「破解彈窗攔截的 Hack」進化為現代 Web 應用不可或缺的模態互動基石。核心價值在於視覺層級管理與強制任務完成。現代實作應以組件化、無障礙、動畫流暢、焦點安全為標準，優先採用成熟 UI 庫 (Radix UI, Headless UI, Bootstrap 5 Modal) 而非手寫，將精力投入業務邏輯與用戶體驗細節打磨。