如何在打开 modal 时触发多张 lazy images 加载

全页仅保留1个模态框节点、1段全局JS，新增图片时不需要重复编写模态框结构，也不需要在元素上绑定内联脚本。

1. Javascript #

仅需在全局脚本中写入一次，通过事件委托处理所有触发逻辑，后续新增图片无需修改JS：

document.addEventListener('click', e => {
  const trigger = e.target.closest('[data-modal-img]')
  if (trigger) document.querySelector('#modal-img').src = trigger.dataset.modalImg
})

2. CSS #

你原有模态框的CSS完全不需要改动，可直接保留。如果需要让触发文本显示为可点击的交互样式，可选补充以下代码：

.modal-trigger {
  cursor: pointer;
  color: #06c;
  text-decoration: underline;
}

3. HTML结构 #

全局模态框（整个页面仅放1次，建议放在body末尾） #

保持隐藏复选框和模态框节点相邻，即可完全复用原有CSS的显隐规则：

<input class="modal-state" id="global-modal" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="global-modal"></label>
  <div class="modal__inner">
    <label class="modal__close" for="global-modal"></label>
    <img id="modal-img" src="" loading="lazy" alt="">
  </div>
</div>

多图触发写法 #

页面任意位置需要触发图片弹窗时，仅需添加一个label标签，通过data-modal-img属性传入对应图片地址即可，支持无限新增：

<p>在我们的<label class="modal-trigger" for="global-modal" data-modal-img="cat.png">门店</label>。</p>

<p>其他参考图：
  <label class="modal-trigger" for="global-modal" data-modal-img="product-1.png">产品图1</label>、
  <label class="modal-trigger" for="global-modal" data-modal-img="product-2.png">产品图2</label>
</p>

逻辑说明 #

• 利用HTML原生label[for]关联表单控件的特性，所有触发元素共用同一个隐藏复选框，点击时自动切换选中状态，模态框显隐完全由原有CSS控制
• 仅当点击带图片地址属性的触发标签时，才会替换模态框内的图片源
• 关闭按钮、遮罩层的标签不带自定义图片属性，点击不会修改现有图片地址，原有交互逻辑完全保留

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