模態(tài)窗口和燈箱可通過純 CSS 實現(xiàn)基礎功能，無需 JavaScript。1. 使用 :target 偽類可基于 URL 錨點控制顯示狀態(tài)，優(yōu)點是無需腳本，但無法點擊遮罩關閉；2. 使用隱藏的 checkbox 和 label 配合，能實現(xiàn)更靈活的交互，如點擊遮罩關閉和添加動畫過渡；3. 注意兼容性、可訪問性（如添加 aria-label）、防止背景滾動（用 overflow: hidden）等優(yōu)化細節(jié)。兩種方法各有適用場景，適合靜態(tài)頁面或輕量級項目。

模態(tài)窗口（Modal）和燈箱（Lightbox）是網(wǎng)頁中常見的交互組件，用來在當前頁面上彈出一個半透明遮罩層，并展示額外內容。實現(xiàn)它們其實不需要復雜的 JavaScript，用純 CSS 也能做到基礎功能，尤其適合靜態(tài)頁面或輕量級需求。

基本結構與觸發(fā)方式

要創(chuàng)建一個模態(tài)窗口，HTML 結構通常包括：

• 觸發(fā)按鈕（如“點擊打開”）
• 遮罩層（overlay 或 backdrop）
• 彈窗內容區(qū)域（modal content）

使用 CSS 控制顯示隱藏狀態(tài)，可以通過 :target 偽類或者結合 checkbox 的 checked 狀態(tài)來控制。:target 是最簡單的方式，但需要 URL 中帶錨點；而 checkbox 更靈活一些，不改變地址欄。

<a href="#modal">打開彈窗</a>
<div id="modal" class="modal">
  <div class="modal-content">
    <a href="#">關閉</a>
    <p>這是彈窗內容</p>
  </div>
</div>

樣式與交互控制

這部分主要靠 CSS 來完成視覺表現(xiàn)和交互邏輯。

使用 :target 實現(xiàn)切換

這種方法利用錨點來激活彈窗，當 URL 包含 #modal 時，對應元素會應用樣式。

.modal {
  display: none;
}

.modal:target {
  display: block;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
}

這種方式的優(yōu)點是完全不用 JS，缺點是無法通過點擊遮罩關閉彈窗，除非再加一個指向頁面其他位置的鏈接。

使用 checkbox 控制狀態(tài)

更現(xiàn)代的做法是使用隱藏的 checkbox 和 label 搭配，這樣可以支持點擊遮罩關閉、動畫過渡等效果。

<input type="checkbox" id="modal-toggle" hidden>
<label for="modal-toggle" class="modal-trigger">打開彈窗</label>

<div class="modal">
  <label for="modal-toggle">關閉</label>
  <div class="modal-content">
    <p>這里是內容</p>
  </div>
</div>

CSS 控制顯示邏輯：

.modal {
  display: none;
}

#modal-toggle:checked ~ .modal {
  display: block;
}

這種方式擴展性更強，也更容易配合動畫和遮罩層點擊關閉。

注意事項與優(yōu)化建議

• 兼容性和體驗：純 CSS 方案雖然輕量，但在舊瀏覽器（如 IE）上可能不完全支持，或者缺少過渡動畫。
• 可訪問性（a11y）：添加 aria-label 或 role="dialog" 可幫助屏幕閱讀器識別彈窗內容。
• 點擊遮罩關閉：如果想實現(xiàn)點擊遮罩關閉彈窗，可以用一個 label 覆蓋整個遮罩層并綁定到 checkbox。
• 防止背景滾動：彈窗顯示時，給 body 加上 overflow: hidden 可以防止背后內容滾動。

總結一下

用 CSS 創(chuàng)建模態(tài)窗口或燈箱，核心在于控制顯示狀態(tài)的切換方式。:target 方法適合快速實現(xiàn)，而 checkbox label 則更適合復雜場景。雖然這些方法不能完全替代 JS 的靈活性，但對于靜態(tài)頁面或輕量項目來說已經(jīng)足夠用了。

基本上就這些，實現(xiàn)起來不難，但有些細節(jié)容易忽略，比如關閉按鈕的位置、遮罩層的響應范圍，還有移動端適配的問題。

以上是使用CSS創(chuàng)建模態(tài)窗口或燈箱的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！