Div with load overlap

Question

Hi, I got this div and I made a code in jquery for when to trigger it through an event, it appears, but I want to style it in a way that the div overlays all the content of my page, with a black background with a certain opacity and a show my content of div, I’m trying to style but unsuccessfully.

.

Follows my code:

   <div class="mask-loading">
        <figure>
           <img src="img/ajax-loading.gif" alt="carregando...">
           <figcaption class="loading-text"></figcaption>
        </figure>
    </div>

Answer 1

Basically, just add the following properties to the CSS:

.mask-loading {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1000;
      background-color: #000;
      opacity: 0.5;
      width: 100%;
      height: 100%;
}

This way you are adding color, opacity, size and position to your div.

Below is an example of how it works. It is not your model, but it is possible to understand what you want.

$('#loader').click(function() {
  $('.mask-loading').show();

  setTimeout(function() {
    $('.mask-loading').hide();
  }, 5000);
});

.mask-loading {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  background-color: #000;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  display: none;
}
img {
  top: 500px;
  z-index: 1000;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mask-loading">
  <figure>
    <img src="http://www.mtlexs.com/images/reload.gif" alt="carregando...">
    <figcaption class="loading-text"></figcaption>
  </figure>
</div>

<div>
  sua página aqui
</div>

<button id="loader">Loader</button>

There are several ways to do what you want. However, as I don’t know your code, I added a way that I think should work for you.