Ninja Tables Pro自定义jQuery图片弹窗出现历史旧图问题求解

• 每次点击图片都调用append()向弹窗容器追加新图片，未提前清空容器内的历史图片，导致之前打开过的图片一直残留
• jQuery remove() 方法用法错误：remove() 不需要传入目标元素的HTML字符串，该方法是直接删除调用它的DOM元素本身，你写的删除旧图片的代码完全不生效
• 潜在兼容问题：Ninja Tables若启用了分页、懒加载、异步刷新逻辑，直接通过.each()遍历绑定点击事件，后续新加载的表格行内的图片无法触发弹窗
• HTML结构缺失闭合标签，可能引发样式异常

1. 修复后JS代码 #

$(document).ready(function() {
  const overlay = $('#overlay');
  const popup = $('.popup');
  const btnClose = $('#btnClose');

  // 关闭弹窗逻辑：隐藏弹窗+清空历史图片
  function closeModal() {
    overlay.hide();
    // 只保留关闭按钮，清空其他所有内容（包括历史图片）
    popup.children().not('#btnClose').remove();
  }

  btnClose.on('click', closeModal);
  // 点击遮罩层也可以关闭弹窗（可选优化）
  overlay.on('click', function(e) {
    if (e.target === this) closeModal();
  });

  // 用事件委托绑定点击事件，适配异步加载的表格图片
  $(document).on('click', '.img', function() {
    // 先清空历史图片
    popup.children().not('#btnClose').remove();
    // 添加当前点击的图片
    const imgSrc = $(this).attr('src');
    popup.append(`<img class="popup-img" src="${imgSrc}" alt="" width="400" height="400">`);
    overlay.show();
  });
});

注：如果你知道表格外层的固定容器类名，可以把事件绑定的根节点从document换成表格容器，进一步缩小绑定范围提升性能。

2. 修复后CSS代码 #

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  z-index: 9999; /* 调高层级避免被其他元素遮挡 */
  display: none;
  /* 用flex实现弹窗垂直水平居中，移除原有的不合理padding */
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.popup{
  max-width: 90%;
  width: fit-content;
  background-color: rgb(243, 243, 243);
  padding: 1em;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  position: relative;
}

.btnClose {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size:16pt;
  cursor: pointer;
  color: rgb(26, 26, 26);
}

/* 弹窗内图片适配移动端 */
.popup-img {
  max-width: 100%;
  height: auto;
}

优化说明：移除了原代码里不合理的固定padding和负margin，改用flex居中适配所有屏幕尺寸，同时避免弹窗超出可视区域。

3. 修复后HTML代码 #

<!-- 表格内图片结构保持不变 -->
<img class="img" src="{{row.photoduproduit}}" alt="" width="150" height="150" class="aligncenter size-full wp-image-5505"/>

<!-- 弹窗结构补全闭合标签 -->
<div id="overlay" class="overlay">
  <div id="popup" class="popup">
    <span id="btnClose" class="btnClose">&times;</span>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Julien Canet