基于Pods Framework的弹窗外部关闭及Magic tag ID的JS调用方案

首先要注意：你当前用{@post_title}作为弹窗ID，但标题里可能包含空格、特殊字符，会直接导致CSS选择器失效。建议换成Pods的{@post_name}标签，它会自动生成URL友好的slug（无空格、特殊字符），确保ID合法。调整后的代码片段如下：

<!-- 触发链接的href对应修改 -->
<a class="project" href="#{@post_name}">
  <img src="{@post_thumbnail_url.1536x1536}">
</a>

<!-- 弹窗ID替换为post_name -->
<div id="{@post_name}" class="overlay_popup">
  <!-- 弹窗内部结构保持不变 -->
</div>

接下来用JavaScript批量处理所有弹窗，不需要针对每个动态ID单独写逻辑，代码如下：

document.addEventListener('DOMContentLoaded', function() {
  // 绑定弹窗触发点击事件
  document.querySelectorAll('.project').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认锚点跳转行为
      const popupId = this.getAttribute('href').slice(1); // 提取#后面的弹窗ID
      document.getElementById(popupId).style.display = 'block';
    });
  });

  // 绑定关闭按钮点击事件
  document.querySelectorAll('.close_popup_up').forEach(btn => {
    btn.addEventListener('click', function(e) {
      e.preventDefault();
      this.closest('.overlay_popup').style.display = 'none';
    });
  });

  // 点击弹窗外部（遮罩层）关闭弹窗
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('overlay_popup')) {
      e.target.style.display = 'none';
    }
  });

  // 阻止弹窗内部点击触发关闭逻辑
  document.querySelectorAll('.popup_up').forEach(popupContent => {
    popupContent.addEventListener('click', function(e) {
      e.stopPropagation();
    });
  });
});

关键逻辑说明 #

• 用DOMContentLoaded确保DOM加载完成后再执行代码，避免找不到元素的问题
• 通过触发链接的href属性匹配对应弹窗ID，实现动态关联
• 点击.overlay_popup（遮罩层）时关闭弹窗，这部分就是你要的「点击外部关闭」区域
• 在.popup_up（弹窗内容区）阻止事件冒泡，避免点击弹窗内部误触发关闭

最后别忘了给弹窗加基础CSS，确保默认隐藏且遮罩层占满全屏：

.overlay_popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.popup_up {
  position: relative;
  margin: 60px auto;
  width: 85%;
  max-width: 900px;
  background-color: #fff;
  padding: 20px;
}

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