点击HTML/CSS卡片触发Lightbox多图灯箱效果异常问题求助

问题根源 #

• 卡片外层.card-content设置了overflow: hidden，如果灯箱默认将弹出DOM挂载到卡片内部或者紧邻卡片的父节点，会被这个属性裁剪，直接导致灯箱显示异常，甚至连带原有卡片hover位移的效果错乱
• 卡片内部包裹的<a href="#" target="_blank">自带点击跳转行为，和灯箱的点击触发事件冲突，事件冒泡或者默认行为没阻止的话，要么跳转要么灯箱不触发
• 现有卡片过渡动画用了未指定属性的transition规则，很多灯箱也会用transform做弹出动画，属性冲突导致原有卡片的hover效果被覆盖

修复方案 #

1. 调整层级和挂载逻辑 #

自行实现灯箱的话，直接把灯箱DOM挂载到<body>根节点下，同时给灯箱设置z-index: 9999确保层级高于所有页面元素，不会被卡片的overflow属性裁剪。

2. 移除a标签默认跳转行为 #

把原有卡片的a标签改成普通div绑定点击事件，或者阻止a标签的默认跳转：

document.querySelector('.card-content a').addEventListener('click', function(e) {
  e.preventDefault();
  // 此处调用灯箱触发逻辑
})

3. 避免CSS属性冲突 #

给你自有卡片的transition规则指定具体生效属性，不要全局过渡所有属性，避免和灯箱的动画冲突：

.card-content-image {
  /* 把原有未指定属性的transition替换为下面的规则 */
  transition: transform 800ms ease;
  width: 100%;
  max-width: 100%;
}

也可以给自有卡片的类名加专属前缀，避免和灯箱库的同名类样式冲突。

4. 原生轻量灯箱实现参考 #

不想引入第三方库的话，可以直接用原生代码实现简单灯箱，避免多余样式冲突：

<!-- 放在body标签末尾 -->
<div class="lightbox" id="lightbox" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); z-index: 9999; align-items: center; justify-content: center;">
  <span id="closeLightbox" style="position: absolute; top: 20px; right: 30px; color: white; font-size: 30px; cursor: pointer;">&times;</span>
  <div class="lightbox-content">
    <!-- 此处替换为你需要展示的多张图片 -->
    <img src="https://images.unsplash.com/photo-1633594708103-e6e41891b679?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1040&q=80" style="max-width: 90%; max-height: 90vh;">
  </div>
</div>

// 绑定卡片点击打开灯箱
document.querySelector('.card-content').addEventListener('click', function() {
  document.getElementById('lightbox').style.display = 'flex';
})
// 点击关闭按钮关闭灯箱
document.getElementById('closeLightbox').addEventListener('click', function() {
  document.getElementById('lightbox').style.display = 'none';
})

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