如何用jQuery实现点击外部/关闭按钮隐藏遮罩与弹窗？故障排查

我来帮你搞定这个问题！你的故障核心原因是原生JS部分只选中了第一个.iframe元素，而且遮罩点击事件里的类名操作逻辑完全错误，导致只有第一个弹窗能正常关闭，其他弹窗在点击遮罩时无法被隐藏。

问题点分析 #

• document.querySelector('.iframe')只会匹配DOM中第一个带有.iframe类的元素，所以当点击遮罩时，只有第一个弹窗会被处理，其他弹窗的open类不会被移除。
• 遮罩点击事件里的overlay.className += 'overlay';和iframeAvatar += 'iframe';是错误的写法：你需要移除open类来隐藏元素，而不是拼接类名，这会导致类名混乱，反而影响样式生效。
• 原头像点击逻辑没有处理“同时打开多个弹窗”的情况，可能导致多个弹窗叠加显示。

修复后的完整代码 #

HTML（无需修改，保持原结构即可）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="avatar">
  <img src="img/mauricio.jpg" alt="">
  <span class="avatar-info"><p><strong>Maurício Munhoz</strong><br/> Diretor/Consultor Técnico</p>
  </span>
</div>
<div class="avatar">
  <img src="img/alexandre.jpeg" alt="">
  <span class="avatar-info"><p><strong>Alexandre Lúcio da Silva</strong><br/> Consultor Lean Manufacturing</p>
  </span>
</div>
<section class="iframe">
  <div class="iframe_avatar">
    <img src="img/mauricio.jpg" alt="">
  </div>
  <div class="iframe_info">
    <span class="iframe_close">&times;</span>
    <p><strong>Maurício Munhoz</strong><br/> Diretor/Consultor Técnico</p>
    <p>Fundador e Diretor da Munhoz Consultoria, Maurício vem trabalhando como Consultor Técnico desde 2003, liderando projetos de certificação de mais de 20 organizações de diferentes segmentos industriais e de prestação de serviço. Atua desde 2008 como Auditor de terceira parte para a maior certificadora mundial de sistemas e produtos: Bureau Veritas Certification. Engenheiro Mecânico com 40 anos de experiência profissional, tendo atuado em todos os processos principais e de apoio: suprimentos, produção, engenharia, qualidade, assistência técnica e manutenção.</p>
  </div>
</section>
<section class="iframe">
  <div class="iframe_avatar">
    <img src="img/alexandre.jpeg" alt="">
  </div>
  <div class="iframe_info">
    <span class="iframe_close">&times;</span>
    <p><strong>Alexandre Lúcio da Silva</strong><br/> Consultor Técnico</p>
    <p>Formado em Engenharia Industrial pela Universidade Braz Cubas de Moji das Cruzes - SP. Antes de fundar a Munhoz Consultoria, Maurício atuou como Engenheiro e Supervisor da Qualidade na Valeo Sistemas Automotivos Ltda, com a coordenação de equipes de técnicos e engenheiros, planejamento de atividades, tratamento de não conformidades, planejamento e gerenciamento de custos e investimentos da área da qualidade, negociação em compras e aprovação de projetos. </p>
  </div>
</section>

CSS（无需修改，保持原样式即可）

.overlay { height: 100%; width: 100%; position: fixed; background-color: rgba(0, 0, 0, .4); top: 0; left: 0; opacity: 0; display: none; z-index: 2; }
.overlay.open { opacity: 1; display: block; z-index: 2; }
.avatar { width: 100%; position: relative; margin: 0 auto; padding: 0; cursor: pointer; }
.iframe { background-color: #FFF; border-radius: 10px; width: 850px; padding: 25px; position: fixed; top: 50%; left: -100%; transform: translate(-50%, -50%); transition: all .5s ease-in-out; }
.iframe.open { z-index: 2; left: 50%; }
.iframe_avatar { position: relative; width: 35%; float: left; margin-right: 25px; }
.iframe_close { float: right; cursor: pointer; font-size: 2.5em; }

JavaScript（核心修复部分）

// 点击头像：先关闭所有弹窗，再打开对应弹窗，显示遮罩
$(".avatar").click(function() { 
  $('.iframe').removeClass('open'); // 关闭所有弹窗
  $('.iframe').eq($(this).index()).addClass('open'); // 打开当前对应弹窗
  $('.overlay').addClass('open'); 
});

// 点击弹窗关闭按钮：关闭当前弹窗和遮罩
$('.iframe_close').on('click', function() { 
  $(this).closest('.iframe').removeClass('open'); 
  $('.overlay').removeClass('open'); 
});

// 点击遮罩：关闭所有弹窗和遮罩
$('.overlay').on('click', function() {
  $('.iframe').removeClass('open');
  $(this).removeClass('open');
});

修复说明 #

1. 统一使用jQuery处理事件：既然项目已经引入jQuery，用它来选择所有.iframe元素更方便，避免原生JS的单个元素选择问题。
2. 优化头像点击逻辑：点击头像时先关闭所有已打开的弹窗，再打开当前对应的弹窗，确保同一时间只有一个弹窗显示。
3. 修正遮罩点击事件：点击遮罩时移除所有弹窗的open类，同时移除遮罩自身的open类，保证所有弹窗都能被隐藏。

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