當我用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';
  }
 })*/