Оверлейная прозрачность рамки и прокрутка вопроса

Мне нужен загрузчик для некоторых страниц, которые можно загрузить.Оверлейная прозрачность рамки и прокрутка вопроса

<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(). Но у меня есть две проблемы: непрозрачность содержимого div не учитывается (прозрачна даже с opacity:1), и если я покажу ее на длинной странице, пользователь сможет прокрутить содержимое тела ...

Как это исправить?

источник

2016-10-14 Anonymous

Непрозрачность наследуется от родительского контейнера и не может быть перезаписана.

Значение применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. MDN Doc

Так предпочитают альфа-канал цвета фона:

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

Тогда для скроллинга, вы должны установить overflow свойство вашего body в hidden, содержание будет обрезан. Значение по умолчанию - visible, позволяющее прокручивать. Удалите проба, когда вы спрячете свою загрузочную рамку. Я трюк я видел один раз, чтобы применить специальный класс для тела:

body.loading { 
    overflow: hidden; 
}

Вы можете использовать этот класс, чтобы отобразить/скрыть загрузки кадра тоже:

body.loading #loader { 
    display: block; 
}

Решение этих двух проблем показано в этом фрагменте:

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

Ваш ответ лучше –

Хороший пример. Я обнаружил, что ваш css применяется один раз к телу, а ваши методы loaderShow()/loaderHide() - изящные. TY. –

использование цвет фона альфа вместо непрозрачности

#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

Я подтвердил ваш ответ, поскольку вы были первыми (14 передо мной), чтобы ответить на проблему непрозрачности. –

Очистка 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 и устанавливает width и height на 100% на элемент body.

источник

2016-10-17 13:20:43

Нет, это не решает проблему непрозрачности или прокрутки. –

Для выпуска непрозрачности, замените

background-color: #808080; 
opacity: 0.5;

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

Для проблемы прокрутки, когда вы делаете загрузчик видимую с JQuery, также добавить класс на теле, .wrapper и добавить в css:

body.wrapper { 
    overflow: hidden; 
}

Результат: https://jsfiddle.net/MadalinaTn/2g3jL54b/7/

источник

2016-10-17 13:57:13

Ничего больше, чем в предыдущих ответах. Вы просто повторно используете ответы других людей. –

@ user987456321 Когда я разместил это, я нажал кнопку «Выполнить фрагмент кода», и я не видел в тексте ссылки «Нажмите». Я не проверял весь код, и я решил это на jsfiddle. Это нормально, предыдущий ответ, я согласен, у меня было хорошее намерение, и я проголосовал за другой ответ, когда понял, что мой ответ придет немного поздно :). –

Оверлейная прозрачность рамки и прокрутка вопроса

ответ

Смежные вопросы