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