Opacity in everything, except in a certain DIV

Question

Opacity in everything, except in a certain DIV

Navigation

#1 by (3 votes)

2

Good afternoon. I need help with something. However, I still do not have a code. It needed something like an ad popup. That is, the entire screen becomes 'dark' while only the div has focus. I would like to understand the logic, if it would be by css, jquery, javascript etc ...

html jquery css

asked by anonymous 11.08.2017 / 20:30

1 answer

Error returns when trying to start some threads in a list Grouping Array Results Out of Loop

score 3 · Accepted Answer

One common way is to have 2 divs.

One occupies the entire screen, creates opacity for the content underneath and detects clicks to know if we want to click outside the dialog.
The other is the dialog itself, without opacity, with z-index or positioning so that it is in the top layer.

An example would look like this:

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>