<...">
Geek Answers Handbook

Overlay frame and scroll transparency

I need a loader for some pages that take a long time to load.

<div id="loader"> <div id="loaderContent" > <img src="/im/loader.gif" /> <p>Traitement en cours...</p> </div> </div>

CSS

 #loader { display: none; position: fixed; z-index: 9999; background-color: #808080; opacity: 0.5; top: 0; left: 0; height: 100%; width: 100%; cursor: wait; } #loaderContent { display: block; position: fixed; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); margin: 0 auto; top: 40%; left: 50%; transform: translate(-50%, -55%); text-align: center; color:darkgreen; background-color: white; border: 2px solid green; border-radius: 20px; opacity: 1; font-size: 22px; font-style: italic; font-weight: bold; padding: 30px 30px 20px 30px; }

I activated and deactivated it using jQuery $("#loader").show() and $("#loader").hide() . But I have two problems: the opacity of the contents of the div is not taken into account (transparent even with opacity:1 ), and if I show it on a long page, the user will be able to scroll through the contents of the body ...

How to fix it?

+6
source share
4 answers

Opacity is inherited from the parent container and cannot be overwritten.

The value applies to the element as a whole, including its contents, even if the value is not inherited by child elements. MDN Doc

Therefore, we prefer the alpha channel of the background color:

 background-color: rgba(125, 125, 125, 0.5);

Then, to scroll, you need to set the overflow property of your body to hidden , the content will be trimmed. The default value is visible , which allows you to scroll. Remove the sample when you hide your loading frame. I’m a trick that I saw once - apply a special class to the body:

 body.loading { overflow: hidden; }

You can use this class to show / hide your load frame:

 body.loading #loader { display: block; }

The solutions to these two problems are demonstrated in this snippet:

 $(document).ready(function() { function loaderShow() { $("body").addClass("loading"); }; function loaderHide() { $("body").removeClass("loading"); }; // Les clicks sur les éléments ayant la classe "loaderOnClick" affichent le loader $('.loaderOnClick').click(function() { loaderShow(); }); }); 
 p { line-height: 25px; } #loader { display: none; position: fixed; z-index: 9999; background-color: rgba(125, 125, 125, 0.5); top: 0; left: 0; height: 100%; width: 100%; cursor: wait; } #loaderContent { display: block; position: fixed; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); margin: 0 auto; top: 40%; left: 50%; transform: translate(-50%, -55%); text-align: center; color: darkgreen; background-color: white; border: 2px solid green; border-radius: 20px; font-size: 22px; font-style: italic; font-weight: bold; padding: 30px 30px 20px 30px; } body.loading { overflow: hidden; } body.loading #loader { display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> <p class="loaderOnClick">Click me !</p> <div id="loader"> <div id="loaderContent"> <img src="https://i.stack.imgur.com/ZXs15.gif" /> <p>Traitement en cours...</p> </div> </div> </body>
+4
source

use alpha background color instead of opacity

 #loader { display: none; position: fixed; z-index: 9999; background-color: rgba(120,120,120,0.5); top: 0; left: 0; height: 100%; width: 100%; cursor: wait; }
+1
source

clearing css should do the trick.

 #loader { display: none; position: absolute; background-color: #808080; opacity: 0.5; top: 0; left: 0; height: 100%; width: 100%; cursor: wait; padding-top: 40%; } #loaderContent { display: block; position: relative; width: 40%; height: 20%; margin: auto; color: darkgreen; background-color: white; border: 2px solid green; border-radius: 20px; } #loaderContent > img { margin: 10% auto; display: block; } #loaderContent > p { font-size: 22px; font-style: italic; font-weight: bold; text-align: center; width: 100%; }

Now you can show() and hide() without any problems. Then it still scrolls the last element in BODY and sets the width and height to 100% in the BODY element.

0
source

Replace opacity

 background-color: #808080; opacity: 0.5;

from

background-color: rgba(128, 128, 128, 0.5);

For the scroll problem, when you make the loader visible with jQuery, add the class to the .wrapper body as .wrapper and add to css:

 body.wrapper { overflow: hidden; }

Result: https://jsfiddle.net/MadalinaTn/2g3jL54b/7/

0
source

More articles:


All Articles