Div with load overlay

Question

Div with load overlay

Navigation

#1 by (1 votes)

0

Hello, I have the following div and I made a code in jquery so when I trigger it through an event, it appears, but I want to style it in a way that the div overlays the entire contents of my page, with a black background with a certain opacity and a show my content of div , I'm trying to style but without success.

.

Followmycode:

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

html jquery css

asked by anonymous 29.11.2016 / 13:43

1 answer

Accept string with letters, numbers, or periods how to format variable with jquery mask

score 1 · Accepted Answer

Basically, just add the following properties in the CSS:

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

That way you're adding color, opacity, size, and position to your div .

Below is an example of how it works. It's not your model, but you can 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><divclass="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 you can do what you want. However, because I do not know your code, I have added a form that I think should work for you.