Gif appear above the page

Asked

Viewed 48 times

0

I have this img that appears a gif with effect of load:

<img id="loading" src="~/images/loading.gif" alt="Updating ..." style="display: none;" />

$(document).ready(function () {
$('#loading').hide();
$('#btn-substituir').click(
    function () {
        $('#loading').show();
    }
);
});

And this function to appear, but I would like it to appear above the page, and in the middle. The way it is, it drops the data, and the image appears loading.

javascript ajax

2 answers

2


You can include some CSS properties to the element in the code itself:

$(document).ready(function () {
   $('#loading').hide();
   $('#btn-substituir').click(
    function () {
        $('#loading')
        .css({
           position: "fixed", // fixa o elemento
           zIndex: "9", // coloca o elemento por cima dos outros
           top: "50%", // move 50% do topo
           left: "50%", // move 50% da esquerda
           transform: "translate(-50%, -50%)" // centraliza
        })
        .show();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="loading" src="https://media1.tenor.com/images/928ee5be0dfe90bfd21f5b3f9f660a51/tenor.gif?itemid=13055476" alt="Updating ..." style="display: none;" />
<button id="btn-substituir">Clique</button>

  • It worked right, how can I darken the screen from below, and leave the img above??

  • Then you’d have to put the image inside a div.

  • 1

    You have to put the id and style="display: None;" in div. See an example: https://jsfiddle.net/v3qek0r6/

  • All right, thank you.

  • 1

    Vc controls transparency in value .5 of the rgba, which goes from 0 to 1. The .5 is half.

0

You can make this change using CSS in the following way:

.loading-div {
//Deixará sua div posicionada no topo esquerdo da tela com tamanho de 100%
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#loading-img {
position: relative;
margin: auto;
}

Place your loading inside a div and use the . show in this div:

<div class="loading-div">
<img id="loading-img" src="~/images/loading.gif" alt="Updating ..." style="display: none;" />
</div>

Browser other questions tagged javascript ajax

You are not signed in. Login or sign up in order to post.