Проблема с прозрачностью и прокруткой фрейма наложения

ProgramBox

Проблема с прозрачностью и прокруткой фрейма наложения

Post author:admin
Запись опубликована:23 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Мне нужен загрузчик для некоторых страниц, которые долго загружаются.

 <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 наличии), и если я отображаю его на длинной странице, пользователь может прокручивать основное содержимое…

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

Ответ №1:

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

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

Поэтому предпочитайте альфа-канал цвета фона :

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

Затем для прокрутки вам нужно установить overflow свойство вашего body to 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>

Развернуть фрагмент

Ответ №2:

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

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

Ответ №3:

очистка 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 элемента.

Ответ №4:

Для проблемы непрозрачности замените

 background-color: #808080;
opacity: 0.5;

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

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

 body.wrapper {
    overflow: hidden;
}

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

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

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

Метки: Проблема с прозрачностью и прокруткой фрейма наложения