Div to loading ajax in full screen?

Question

Div to loading ajax in full screen?

Navigation

#1 by (4 votes)

3

I'm using Bootstrap 3 and I've created a <div> that works fullscreen for an ajax loading, this works fine if the screen is docked, with no vertical scrollbar. But now I noticed that if the page has scrollbar vertically, that is, it is a page with heigth greater than the <div> of loading is not displayed on the whole screen, it does not auto adjust.

How do I solve this problem?

CSS

/** loading */
#div_loading  {    
    position:absolute;
    top:0;
    left:0;
    z-index:11;
    background-color:#000;
    min-height:100%;
    width:100%;    
    height:auto;
    opacity: .50;
    filter: alpha(opacity=65);
    background-image: url(../Imagens/ajaxloader.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
    display:none;    
}

Here is an image of what it looks like when it has vertical scrolling.

twitter-bootstrap bootstrap-3

asked by anonymous 26.05.2017 / 06:05

1 answer

JasperView closing the entire system Save date in Brazilian format in Postgresql

score 4 · Accepted Answer

Have you tried with position: fixed ?

$(".overlay").mouseover(function(){
    $(".overlay").css("background-image",
    "url(https://i.stack.imgur.com/8t6P3.gif)",
    );
});

$( ".overlay" ).click(function() {
    alert( "Click!" );
});

$(".overlay").mouseout(function(){
    $(".overlay").css("background-image",
    "url(https://i.stack.imgur.com/BNGOI.gif)",
    );
});

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(70,20,15,0.3);
    z-index: 2;
    background-image: url(https://i.stack.imgur.com/BNGOI.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="test" class="overlay"></div>
<h1>Иус ат веро афферт</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt sollicitudin facilisis. Ut tempor odio non iaculis cursus. Cras fermentum porttitor dui, vel consectetur risus auctor id. Integer a congue erat. Vivamus vulputate ex lacus, vel vehicula neque varius non. Ut eu turpis luctus, placerat ante nec, pharetra metus. Aenean turpis diam, consectetur eu odio vitae, hendrerit pharetra mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus accumsan tempor cursus. Phasellus dictum lacinia metus, eu dignissim leo lacinia et. Vivamus hendrerit imperdiet dictum. 
In sem eros, vestibulum feugiat efficitur ut, scelerisque ac diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper sem nisi, at rutrum orci viverra vel. In hac habitasse platea dictumst. Suspendisse sollicitudin lobortis nunc, non pretium erat tempor vitae. Mauris porta malesuada lorem eu elementum. Nulla libero elit, feugiat a ullamcorper sed, pulvinar ac augue. Cras lacinia mauris vel mauris faucibus consequat. Morbi est mauris, semper eget ante ut, euismod ornare mi. Ut ligula erat, tincidunt eu erat ac, ultricies finibus turpis. 
</p>
<ul>
<li>Donec scelerisque dui leo, a luctus mi luctus sed</li>
<li>Aenean tempus dui libero, at aliquet odio</li>
<li>Vestibulum imperdiet bibendum metus</li>
<li>Pellentesque ut rutrum augue</li>
<li>Magna fermentum orci pretium</li>
<li>Maecenas mi mi, convallis rutrum ultrices ac</li>
<li>Proin at lectus massa</li>
<li>Fusce vehicula arcu odio</li>
<li>dapibus lorem</li>
</ul>
<p>
ლორემ იფსუმ დოლორ სით ამეთ, ცუ ეოს რიდენს ფუთანთ ინიმიცუს, აეთერნო დისცერე ნამ ეი. ესთ მოდო მალორუმ დენიყუე ათ, ნისლ ყუოთ იდ მეა, ნამ ნო აუგუე მელიუს. ნეც ნო მოდუს მინიმ დოცენდი, თე ფრი ადმოდუმ ცონსეცთეთუერ. გრაეცის ფერსეყუერის ეა ველ, ფოსსით სემფერ სეა ეუ. ეთ სით ევერთი დოლორეს, იუს ცუ ოდიო რიდენს ალიენუმ.
</p>