100% modal with CSS

Question

Someone can help me, I need to make a modal, an msg that will appear in the loading of the site, with a background all opaque, IE, with the modal characteristics same, and when clicking the window close... but I need it to be 100% in CSS.

Answer 1

The blocking "modal" is possible to do only with CSS, but to close with the click, you need Javascript to modify the behavior of DOM:

#carregando {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-family: sand-serif;
  font-size: 20px;
  left: 0;
  height: 100%;
  position: fixed;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  width: 100%;
}
#carregando span {
  height: 30px;
  left: 0;
  line-height: 30px;
  margin-top: -15px;
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: 999999;
}

<div id="carregando" onclick="this.style.display = 'none'"><span>Carregando...</span></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a erat tortor. Nam tincidunt risus quam, nec maximus lorem dictum at. Integer sit amet pharetra elit, condimentum pharetra massa. Nullam quis condimentum urna. Maecenas hendrerit, tortor non consectetur eleifend, nisi urna dapibus ex, mattis gravida purus orci ac turpis. Aliquam ut ornare diam. Aliquam lacinia bibendum congue. Sed cursus feugiat felis tempor vestibulum. Nullam lobortis turpis tempus, egestas turpis a, venenatis magna. Etiam aliquam enim et massa iaculis mattis. Nam ut risus quis magna feugiat vulputate. Etiam condimentum massa sed interdum tempus. Morbi sit amet erat urna.</p>
<p>Etiam pretium libero lorem, in euismod diam semper sit amet. Duis tincidunt, quam ut interdum imperdiet, mi felis auctor massa, vel eleifend libero turpis sed arcu. Vivamus semper faucibus ante, non sodales massa posuere et. Ut urna turpis, consequat porta tristique a, accumsan vitae enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sed diam ac turpis iaculis eleifend. Maecenas sit amet eleifend justo. Etiam dignissim hendrerit lorem, id venenatis risus auctor ac. Quisque accumsan enim id diam auctor sollicitudin. Mauris nulla dui, blandit id porta nec, bibendum eu tortor. Duis ac pulvinar massa. Sed lacinia ut lectus sit amet imperdiet. Suspendisse a semper massa.</p>
<p>Suspendisse potenti. Vivamus a faucibus sapien. Nullam eu scelerisque neque, eu pulvinar velit. Cras luctus enim eros, eget ullamcorper mauris molestie eu. Proin posuere quam sed felis efficitur, eget venenatis eros volutpat. Aliquam erat volutpat. Nullam scelerisque rhoncus velit, et feugiat felis tempor ac. Aenean sed suscipit justo. Duis ut elementum metus, at gravida odio. Nunc imperdiet, neque porttitor condimentum euismod, enim augue condimentum turpis, vitae tincidunt nunc tortor sed metus. Cras et ante et sem porta condimentum. Donec quis suscipit mi, eget pretium elit. Sed luctus sed ipsum nec hendrerit. Duis id placerat dolor. Aliquam erat volutpat. Maecenas blandit enim et eros placerat sagittis.</p>
<p>In vitae ante a ex pellentesque suscipit sit amet quis odio. Ut sed tincidunt magna, id porttitor lorem. Proin nec velit eget nunc semper vulputate. Donec et nisl eu mauris viverra pellentesque. Nam ornare imperdiet augue at fermentum. Suspendisse dapibus tellus nec imperdiet vehicula. Quisque volutpat urna tortor, nec tempus turpis imperdiet id. Sed eget diam ex. Praesent vel semper odio.</p>

Answer 2

You get it with the property checked as in the example below:

*{
  box-sizing: border-box;
}
.modal{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.7);
  top: 0px;
  left: 0px;
  z-index: -1;
  opacity: 0;
  transition: all 0.5s;
  padding: 0px 20px;
}

label{
  padding: 10px;
  background-color: #bdc3c7;
  color: #34495e;
  border-radius: 3px;
  font-family: sans-serif;
  cursor: pointer;
  margin: 10px;
  display: inline-block;
}

#botao{
  display: none;
}

#botao:checked + .modal{
  z-index: 100;
  opacity: 1;
}

.content{
  background-color: #fff;
  max-width: 700px;
  margin: 20px auto;
  padding: 20px;
}

<label for="botao">Modal</label>
<input id="botao" type="checkbox">
<div class="modal">
  <div class="content">
    <label for="botao">X Fechar</label>
  </div>
</div>