javascript - 当我用jquery点击外面时如何使覆盖和部分消失

Question

我正在努力做到这一点:

当用户同时点击 closeBtn 和窗口时，覆盖效果和弹出窗口消失。

我不明白为什么到目前为止只有第一部分和叠加层消失了，当我去的时候我会尝试第二部分，只有叠加层消失了。

总共有五个头像 div 和五个 iframe 部分。当您点击一个头像时，相应的部分和叠加层应该出现，当您点击 closeBtn 或外部时，两者都应该消失。

$(".avatar").click(function() {
  $('.iframe').eq($(this).index()).toggleClass('open');
  $('.overlay').addClass('open');
});

$('.iframe_close').on('click', function() {
  $(this).closest('.iframe').removeClass('open');
  $('.overlay').removeClass('open');
});

var overlay = document.querySelector('.overlay');
var iframeAvatar = document.querySelector('.iframe');

window.addEventListener('click', function() {
  if (event.target === overlay) {
    overlay.className += 'overlay';
    iframeAvatar += 'iframe';
  }
})

.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;
}

<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>

Answer 1

我想如果你像下面这样调整你的 js 代码应该可以工作:

$(".avatar").click(function() {
    $('.iframe').eq($(".avatar").index($(this))).toggleClass('open');
    $('.overlay').addClass('open');
});

$('.iframe_close').on('click', function() {
    $(this).closest('.iframe').removeClass('open');
    $('.overlay').removeClass('open');
});

$('.overlay').on('click', function() {
    $('.iframe').removeClass('open');
    $('.overlay').removeClass('open');
});

并且不需要以下部分:

/*var overlay = document.querySelector('.overlay');
 var iframeAvatar = document.querySelector('.iframe');

 window.addEventListener('click', function() {
  if (event.target === overlay) {
   overlay.className += 'overlay';
   iframeAvatar += 'iframe';
  }
 })*/