Floating box with CSS and HTML

Question

Floating box with CSS and HTML

Navigation

#1 by (1 votes)

1

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

I would like something like the option that uol or Folha de São Paulo uses to warn you to disable AdBlock.

I just can not copy the code to make it work.

javascript html css

asked by anonymous 29.03.2018 / 16:14

1 answer

Promises on NodeJS Accessing carouselview within a listview

score 1 · Accepted Answer

Basically two divs are created, one that is responsible for darkening the content and that lies between the content of the page and modal . And the other one 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>