1. ホーム
  2. 質問と答え
  3. オーバーレイフレームの透明度とスクロールの問題

オーバーレイフレームの透明度とスクロールの問題

2016-10-14 8 views
6

読み込みに時間がかかるページにはローダーが必要です。オーバーレイフレームの透明度とスクロールの問題

<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; 
}

私が活性化し、jQueryの$("#loader").show()と$("#loader").hide()でそれを無効にします。しかし、私は2つの問題があります：コンテンツdivの不透明度は考慮されません（opacity:1でも透明です）。長いページに表示すると、ユーザーは本文コンテンツをスクロールできます。

それを修正するには？

出典

2016-10-14 Anonymous

答えて

4

不透明度は、親コンテナから継承され、上書きすることはできません。

この値は、値が子要素に継承されていなくても、その内容を含めて要素全体に適用されます。 MDN Doc

だから、背景色のアルファチャンネルを好む：

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

はその後、スクロールのために、あなたはあなたのbodyhiddenへのoverflowプロパティを設定する必要があり、コンテンツがクリップされます。デフォルト値はスクロールを許可するvisibleです。ローディングフレームを隠すときは、プロバティを削除します。

body.loading { 
    overflow: hidden; 
}

あなたのロードフレームは、あまりにも非表示/表示するには、このクラスを使用することができます：

body.loading #loader { 
    display: block; 
}

この2つの問題の解決策がされて私は体にカスタムクラスを適用することで、一度見たトリックこのスニペットで実証：

$(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>

出典

2016-10-14 13:51:39

+0

あなたの答えはより良い –

+0

いい例。あなたのCSSがbodyとloaderShow（）/ loaderHide（）メソッドに一度適用されました。 TY。 –

1

使用背景色アルファの代わりに不透明

#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; 
}

出典

2016-10-14 13:51:25

+0

私は不透明性の問題に答える最初の（14秒前の）回答をアップしました。 –

0

CSSのクリーンアップはすべきことです。

#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%; 
}

今は問題なくshow()とhide()ことができます。まだスクロールしておき、BODYの最後の要素にして、body要素のwidthとheightから100%に設定してください。不透明度の問題については

出典

2016-10-17 13:20:43

+0

いいえ、不透明度の問題やスクロールの問題は解決しません。 –

0

、あなたはjQueryを使ってローダーを見えるようにするとき、体にもクラスを追加し、

スクロール問題については

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

で

background-color: #808080; 
opacity: 0.5;

を置き換え、.wrapperとcssに追加：

body.wrapper { 
    overflow: hidden; 
}

結果：https://jsfiddle.net/MadalinaTn/2g3jL54b/7/

出典

2016-10-17 13:57:13

+0

前回の回答以上のものはありません。他の人の回答を再利用するだけです。 –

+0

@ user987456321私はこれを投稿したときに「Run code snippet」をクリックし、テキストのリンク「Click」を見たことがありませんでした。私はすべてのコードをチェックしなかったので、jsfiddleでこれを解決しました。前回の答えは、私は同意した、私は良い意思があったと私は私の答えが少し遅れて来たと分かった:)私は他の答えに投票した。 –

関連する問題

 関連する問題