Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

317
Visualizações
How can I close layer popup when I click background or button?

The scenario is as follows.

enter image description here

  1. Default Status (no layer popup)
  2. When I click the button, layer popup shows.
  3. Click the button or outside, layer popup will be hide.

I want to close the layer popup when I click background(outside) or button.

How can I do with Vanilla JS or jquery? (based on HTML)

I would appreciate it if you could answer.

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

When you open the popup attach a click listener to body that closes it and removes the listener.

about 4 years ago · Juan Pablo Isaza Relatório

0

You can use this code

//use by id

document.getElementById(#id).style.display = 'block';
document.getElementById(#id).style.display = 'none';

//use by className 



document.getElementById(.className).style.display = 'none';
document.getElementById(.className).style.display = 'block';

or use jQuery

$(document).ready(function(){
       $("#id").click(function(event){
         // $("#id").toggle();
         // $("#id").hide();
         // $("#id").show();
       });
     });
about 4 years ago · Juan Pablo Isaza Relatório

0

Set id for your layer in HTML part like id="layerPopup" Then on your JS code create event for your button

$(document).on('click', '#btnId', function(){ 
    $("#layerPopup").hide();

});
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda