Opacity in everything except a certain DIV

Question

Good afternoon. I need help with something. However, I don’t have a code yet. I needed something similar to an ad popup. That is, the whole screen gets 'dark' while only the div has focus. I would like to understand the logic, whether it would be by css, jquery, javascript etc...

Answer 1

A common way is to have 2 Ivs.

• One takes the whole screen, creates opacity for the content underneath and detects clicks to see 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 upper layer.

An example would be 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>