Черно-белое наложение за модальным окном - PullRequest
Новая
       5

Черно-белое наложение за модальным окном

0 голосов
/ 13 мая 2018

помощь нужна еще раз.Есть кнопка, которая вызывает модальное всплывающее окно, которое, в свою очередь, вызывает div.overlay.Фрагмент CSS класса overlay: 

.overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 z-index: 100;
 background: rgba(0,0,0,0.7);
}

довольно стандартная ситуация.Что мне нужно, так это наложение, действующее как своего рода фильтр для фона позади него, для рисования body черно-белым.теперь я знаю, что есть css grayscale(), проблема в том, что я применяю 

body {
 filter: grayscale(100%);
}

вместе с .overlay - мое модальное всплывающее окно также становится черно-белым. Любые идеи о том, как добиться черногои белое тело, которое не может взаимодействовать (не может щелкнуть что-либо позади модального) с подобным наложением в то же время, чтобы не сделать модальное окно также черно-белым.

Ответы [ 2 ]

0 голосов
/ 13 мая 2018

Если вам разрешено изменять структуру html, вы можете обернуть весь ваш контент в div и вставить всплывающее окно вне его, чтобы вы могли применитьfilter только для содержимого, когда отображается всплывающее окно.

Пример: 

<body>

    <div id="content-wrapper">
        All of your content goes here
    </div>

    <div id="my-popup">
        This is my popup
    </div>

</body>

... теперь вы просто добавляете filter: grayscale(100%); к content-wrapper всякий раз, когда отображается всплывающее окно.

Чтобы упростить его.Вы можете контролировать это, просто добавляя класс в <body> всякий раз, когда хотите показать всплывающее окно, например: 

/* hide the popup initially */
#my-popup{
    display: none;
}

/* gray the content and show the popup 
 * when the class is added to the body
 */
body.is-popup-open #content-wrapper{
    filter: grayscale(100%);
}
body.is-popup-open #my-popup{
    display: block;
}
0 голосов
/ 13 мая 2018

У вас есть два варианта:

1. фон-фильтр

Это был бы самый простой способ сделать это, но поддержка браузера очень слабая, и в значительной степени только Safari 9+ поддерживает это должным образом прямо сейчас (это может работать вХром за флагом). 

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
}

.inner {
  background-color: #f88;
  padding: 20px;
  font-size: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Rosa_Red_Chateau01.jpg/360px-Rosa_Red_Chateau01.jpg" width="200">

<div class="overlay">
  <div class="inner">
    Overlay
  </div>
</div>

2.Наложение не должно быть дочерним по отношению к элементу filter

filter будет применяться к самому элементу и ко всем его дочерним элементам, поэтому оверлейный элемент div не должен быть дочерним по отношению к элементу фильтра.если вы не хотите, чтобы это затрагивалось.

В следующем примере вам придется переключать класс grayed при отображении / скрытии наложения. 

.grayed {
  filter: grayscale(1);
}

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
}

.inner {
  background-color: #f88;
  padding: 20px;
  font-size: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
<div class="app grayed">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Rosa_Red_Chateau01.jpg/360px-Rosa_Red_Chateau01.jpg" width="200">
  <!-- The rest of your app is in here -->
</div>

<div class="overlay">
  <div class="inner">
    Overlay
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...