2

Boa tarde. Preciso de ajuda em algo. Porém, ainda não tenho código. Precisava de algo parecido com um popup de anuncio. Ou seja, a tela inteira fica 'escura' enquanto apenas a div possui foco. Gostaria de entender a lógica, se seria por css, jquery, javascript etc...

1

1 Resposta 1

3

Uma maneira comum é teres 2 divs.

  • Uma ocupa o ecrã todo, cria opacidade para o conteudo que está por baixo e deteta cliques para saber se queremos clicar fora do dialog.

  • A outra é o próprio dialog, sem opacidade, com z-index ou posicionamento para que esteja na camada superior.

Um exemplo seria assim:

var overlay = document.querySelector('.overlay');
var dialog = document.querySelector('.dialog');
var button = document.querySelector('button');

overlay.addEventListener('click', function() {
  alert('Clique detetado na overlay, vamos fechar o Dialog!');
  overlay.style.display = dialog.style.display = 'none';
});

button.addEventListener('click', function() {
  alert('Clique detetado no botão!');
});
.overlay {
  opacity: 0.2;
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.dialog {
  top: 10%;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  border-radius: 5px;
  background-color: #eef;
  height: 30%;
  width: 30%;
  padding: 5px 20px;
  position: absolute;
  border: 4px solid #fff;
}
<p> Algum conteúdo da página... </p>
<button type="button">Mais conteúdo</button>
<div class="overlay"></div>
<div class="dialog">
  <h3>Dialog!</h3>
  <p>Conteudo do dialog</p>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .