Floating box with CSS and HTML

Question

I would like to know how to create a floating box that darkens the screen behind and information appears in the center of the page , I searched in stackoverflow br and did not find something similar.

I wanted something like the option that Uol or the sao paulo sheet use warning to disable Adblock.

I just can’t copy the code to make it work.

Answer 1

Basically two are created Divs, which is responsible for darkening the content and which is between the content of the page and the modal. And the other that will contain the information.

function fecharModal()
{
  document.getElementById('fundo').style.display = 'none';
  document.getElementById('modal').style.display = 'none';
}

function abrirModal()
{
  document.getElementById('fundo').style.display = 'block';
  document.getElementById('modal').style.display = 'block';
}

#fundo {
  opacity: 0.8;
  background-color: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 98;
  top: 0;
  left: 0;
  display: none;
}

#modal {
  width: 150px;
  height: 150px;
  left: 50%;
  top: 50%;
  margin: -75px 0 0 -75px;
  position: fixed;
  background-color: #fff;
  z-index: 99;
  display: none;
}

<a href="#" class="abrir" onclick="abrirModal();">abrir</a>

<div id="fundo"></div>
<div id="modal">
  <a href="#" class="fechar" onclick="fecharModal();">fechar</a>
</div>