为不同Overlay ID复用同一JavaScript函数的实现方案

核心优化思路 #

• 用**数据属性（data-*）**或直接传参的方式，关联触发链接与对应弹窗，避免硬编码多个重复函数
• 编写通用的打开/关闭函数，适配所有弹窗实例
• 统一CSS类名，减少冗余的ID选择器代码

1. 修正并优化HTML结构 #

首先修复原HTML中弹窗嵌套的错误，给触发链接添加弹窗ID关联，同时统一弹窗内部结构的类名：

<!-- 弹窗1 -->
<div id="overlay" class="overlay" onclick="closeOverlay(this)">
  <div class="overlay-text">
    <div style="width: 48%; float:left">
      <h2>XXX</h2>
      <h4>ZZZ</h4>
      <p style="font-size:14px;">
        Help bring forth the immense talent that resides amongst the valley’s citizens.
      </p>
    </div>
    <div style="width: 50%; float:right; margin-top:-220px;">
      <img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
    </div>
  </div>
</div>

<!-- 弹窗2 -->
<div id="overlay1" class="overlay" onclick="closeOverlay(this)">
  <div class="overlay-text">
    <div style="width: 48%; float:left">
      <h2>AAA</h2>
      <h4>MMM</h4>
      <p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens.</p>
    </div>
    <div style="width: 50%; float:right; margin-top:-220px;">
      <img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
    </div>
  </div>
</div>

<!-- 触发链接 -->
<a onclick="openOverlay('overlay')" style="font-size: 11pt;">Read More -&gt;</a>
<a onclick="openOverlay('overlay1')" style="font-size: 11pt;">Read More -&gt;</a>

2. 精简CSS代码（使用类选择器） #

把原有的多个ID选择器替换为通用类，减少代码冗余：

.img {
  transition: transform 5s ease-in-out;
  transform: scale(1);
  transform-origin: 0 0;
}

.img:hover {
  transform: scale(1.25)
}

/* 通用弹窗样式 */
.overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 77777772;
  cursor: pointer;
}

/* 通用文本容器样式 */
.overlay-text {
  position: fixed;
  top: 20%;
  left: 5%;
  color: black;
}

3. 通用JavaScript函数（复用逻辑） #

只需要两个函数就能处理所有弹窗的打开和关闭：

// 打开指定ID的弹窗
function openOverlay(overlayId) {
  const targetOverlay = document.getElementById(overlayId);
  if (targetOverlay) {
    targetOverlay.style.display = "block";
  }
}

// 关闭当前点击的弹窗
function closeOverlay(overlayElement) {
  overlayElement.style.display = "none";
}

可选进阶优化（无内联事件） #

如果想完全分离HTML与JavaScript逻辑，可以移除内联onclick，改用事件监听：

修改后的HTML触发链接

<a data-overlay-id="overlay" style="font-size: 11pt;">Read More -&gt;</a>
<a data-overlay-id="overlay1" style="font-size: 11pt;">Read More -&gt;</a>

对应的JavaScript

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 绑定所有触发链接的点击事件
  document.querySelectorAll('[data-overlay-id]').forEach(link => {
    link.addEventListener('click', function() {
      const overlayId = this.getAttribute('data-overlay-id');
      openOverlay(overlayId);
    });
  });

  // 绑定所有弹窗的关闭事件
  document.querySelectorAll('.overlay').forEach(overlay => {
    overlay.addEventListener('click', function() {
      this.style.display = "none";
    });
  });
});

function openOverlay(overlayId) {
  const targetOverlay = document.getElementById(overlayId);
  if (targetOverlay) {
    targetOverlay.style.display = "block";
  }
}

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