多JavaScript弹窗按钮异常：点击不同图片弹出同一overlay

问题说明 #

开发平面设计作品集网站时，点击项目图片需弹出对应Overlay展示详情。已有3个项目共用一个Overlay可正常工作，但新增Arnolds Cheques项目的Overlay后，点击对应图片仍弹出TEAM GB的Overlay，即使新增了对应JavaScript函数并修改了按钮关联ID，问题依旧。

错误原因 #

HTML中ID是页面唯一标识，两个Overlay都使用了id="overlay"，调用document.getElementById("overlay")时只会返回页面中第一个匹配该ID的元素（即TEAM GB的Overlay），因此无论点击哪个项目图片，显示的都是第一个Overlay。

修复步骤 #

1. 修改Overlay的HTML结构 #

给每个Overlay设置唯一ID，并添加共用的类名以复用CSS样式：

TEAM GB Overlay 修改后

<!-------TEAM GB OVERLAY-----&gt;
<div id="overlay-gb" class="overlay" onclick="gb_off()">
        <div class="overlay_img">
            <img src="images/gb_men.png" width= "100%">
            <br><br><br><br><br><br><img src="images/post_worlds_men.png" width= "100%">
            <br><br><br><br><br><br><img src="images/world_games.png" width= "100%">
            <br><br><br><br><br><br><img src="images/Juniors_full.png" width= "100%">
            <br><br><br><br><br><br><img src="images/juniors.png" width= "100%">
            <br><br><br><br><br><br><img src="images/ALL_ENGLAND.png" width= "100%">
            <br><br><br><br><br><br><img src="images/welsh_champs.png" width= "100%">
            <br><br><br><br><br><br><img src="images/northern_unis.png" width= "100%">
            <br><br><br><br><br><br><img src="images/sm_uni_champs.png" width= "100%">
        </div>  
    <div class="overlay_title">
        PROMOTIONAL SOCIAL MEDIA POSTERS:
            <div class="overlay_title_thin">
        BRITISH POWERLIFTING FEDERATION &amp; AFFILIATES
    </div>
<div class="overlay_text">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap 
    into electronic typesetting, remaining essentially unchanged. It was popularised    
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus PageMaker including
    versions of Lorem Ipsum.
</div>  
    </div>
        <div class="overlaping_img">
            <img src="images/gb_women.png" width= "100%">
            <br><br><br><br><br><br><img src="images/post_worlds_women.png" width= "100%">
            </div>      
</div>

Arnolds Cheques Overlay 修改后

<!-------ARNOLDS CHEQUES OVERLAY-----&gt;
<div id="overlay-arnolds" class="overlay" onclick="arnolds_off()">
    CONTENT WILL GO HERE
</div>

2. 更新JavaScript函数 #

让每个函数对应各自的唯一Overlay ID：

<script>
<!--------TEAM GB POSTERS------> 
function gb_on() {
  document.getElementById("overlay-gb").style.display = "block";
}

function gb_off() {
  document.getElementById("overlay-gb").style.display = "none";
}
<!--------ARNOLDS------> 
function arnolds_on() {
  document.getElementById("overlay-arnolds").style.display = "block";
}

function arnolds_off() {
  document.getElementById("overlay-arnolds").style.display = "none";
}
</script>

3. 调整CSS样式 #

将原ID选择器改为类选择器，实现样式复用：

.overlay {
  position: fixed;
  background-size: 100% 100%;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  z-index: 9999;
  cursor: pointer;
  overflow: scroll;
}

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