WordPress HTML5 点击弹出图片（灯箱效果）

时间：2023-12-30 08:34:15 来源：aliz.cn 作者：SKY 阅读：

两种方案：纯 HTML + 原生 JS（不用插件，推荐）、WordPress 内置 Gallery 灯箱，直接复制代码可用，不用装灯箱插件。

方案 1：原生 HTML5+JS 点击弹窗放大图片（无插件）

把下面完整代码放到 WordPress自定义 HTML 块，或者主题的single.php/page.php 模板里。
html
预览

<!-- 页面图片，点击触发弹窗 -->
<img class="pop-img" src="https://xxx.com/photo.jpg" alt="示例图片" style="max-width:400px;cursor:pointer;">

<!-- 弹出遮罩层 -->
<div id="imgModal" style="display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.85);text-align:center;padding-top:30px;box-sizing:border-box;">
  <span id="closeModal" style="position:absolute;top:15px;right:35px;color:#fff;font-size:40px;font-weight:bold;cursor:pointer;">&times;</span>
  <img id="modalImg" style="max-width:90%;max-height:85vh;">
</div>

<script>
// 获取元素
const modal = document.getElementById('imgModal');
const modalImg = document.getElementById('modalImg');
const closeBtn = document.getElementById('closeModal');
// 所有带pop-img类的图片
document.querySelectorAll('.pop-img').forEach(img=>{
  img.onclick = function(){
    modal.style.display = 'block';
    modalImg.src = this.src;
  }
})
// 关闭按钮
closeBtn.onclick = ()=> modal.style.display = 'none';
// 点击遮罩背景关闭
modal.onclick = function(e){
  if(e.target === modal){
    modal.style.display = 'none';
  }
}
</script>

使用方法

在文章 / 页面，添加「自定义 HTML」块；粘贴全部代码
修改<img class="pop-img" src="图片地址">的 src 为你 WordPress 媒体库图片链接
页面上图片点击就全屏弹窗放大，点击 × 或者黑色背景关闭。

如果你想页面内所有图片都支持点击弹出，不要写单张 img，把 JS 放到主题自定义 JS，去掉手动 img 标签。

方案 2：全站所有图片自动弹窗（推荐，加到主题自定义 JS）

WordPress 后台 → 外观 → 自定义 → 额外 CSS + 额外 JS，分开粘贴。
额外 CSS：
css

/* 弹窗样式 */
.img-popup-mask{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.88);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
}
.img-popup-mask.show{display:flex;}
.img-popup-mask img{
  max-width:95%;
  max-height:92vh;
  object-fit:contain;
}
.img-popup-close{
  position:absolute;
  top:16px;
  right:24px;
  color:#fff;
  font-size:36px;
  cursor:pointer;
}

额外 JS：
javascript
运行

// 创建弹窗DOM
const mask = document.createElement('div');
mask.className = 'img-popup-mask';
mask.innerHTML = `<span class="img-popup-close">&times;</span><img>`;
document.body.appendChild(mask);
const popImg = mask.querySelector('img');
const closeBtn = mask.querySelector('.img-popup-close');

// 文章内图片绑定点击，排除头像、缩略图小图
document.querySelectorAll('.entry-content img').forEach(img=>{
  img.style.cursor='zoom-in';
  img.addEventListener('click',function(){
    popImg.src=this.src;
    mask.classList.add('show');
  })
})

// 关闭
closeBtn.onclick=()=>mask.classList.remove('show');
mask.onclick=e=>{
  if(e.target===mask) mask.classList.remove('show');
}