Размытый фон при отображении портала React - PullRequest
Новая
       10

Размытый фон при отображении портала React

0 голосов
/ 07 июня 2018

Я использую порталы React для создания модального всплывающего окна после отправки формы.Я хотел бы размыть только фон и показать модальное изображение, как на рисунке 2. Я использовал document.body.style.filter = "blur(5px) на первом изображении, но оно стирает все.CSS для модального и модального корня (мой код почти идентичен документам React для порталов) 

```
#modal-root {
  position: relative;
  z-index: 999;
}
.modal {
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  z-index: 99999;
}```

What I have so far

what I want it to look like

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

К каждому дочернему элементу размытого элемента будет применен этот фильтр.Так как у вас есть код, аналогичный документации по порталу, я собираюсь предположить, что ваша html-структура выглядит примерно так: 

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>

, если это так, тогда примените фильтр к app-root aka ... 

document.getElementById('app-root').style.filter = 'blur(5px)'
0 голосов
/ 07 июня 2018

Можете ли вы обернуть тело в внешний div, а затем размыть его, убедившись, что ваш модал находится за пределами вашего div "blur"?

...