如何阻止图片Lightbox在移动屏幕上打开？

问题场景 #

网站图片画廊点击图片会打开Lightbox弹窗，现在需要仅在移动屏幕上阻止弹窗打开，且完全没有响应式JavaScript开发经验。

解决方案 #

核心思路是在打开弹窗的函数里，先判断当前屏幕宽度，当宽度小于设定的移动端断点（比如768px，可按需调整）时，直接终止函数，不执行弹窗打开逻辑。

修改后的代码 #

替换你原来的openModal函数即可，其余代码保持不变：

// Open the Modal
function openModal() {
  // 判断屏幕宽度，小于768px时不打开弹窗
  if (window.innerWidth < 768) {
    return; // 直接退出函数，不执行后续弹窗逻辑
  }
  document.getElementById("myModal").style.display = "block";
  document.getElementById("navclose").style.display = "none";
}

额外说明 #

• 断点选择：768px是常用的移动端/平板分界点，你可以根据自己的需求改成其他数值（比如640px）。
• 窗口缩放适配：这个判断是实时生效的，如果用户在桌面端把窗口缩到小于设定宽度，点击图片也不会打开弹窗，符合响应式逻辑。
• 触发覆盖：如果你的画廊缩略图是通过onclick="openModal()"触发弹窗，这个修改已经覆盖所有触发场景，无需额外调整。

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