Как применить эффект размытия к фону, когда модал открывается в React? - PullRequest
Новая
       6

Как применить эффект размытия к фону, когда модал открывается в React?

1 голос
/ 05 марта 2020

Я думаю, что название нелегко понять, что я имею в виду, когда мы используем библиотеку пользовательского интерфейса, такую ​​как Bootstrap, Material UI и т. Д. c ... Когда мы нажимаем кнопку, чтобы показать модальный режим, непрозрачность фона кроме того, его модал изменен на темный.

https://material-ui.com/components/modal/#modal

Вы можете увидеть вышеупомянутый URL при нажатии на кнопку, чтобы отобразить модальный режим. Фон изменился как эффект размытия.

Я не использую вышеуказанную библиотеку, я просто хочу сделать это сам. Ниже мой код, можете ли вы дать мне несколько советов? Я думаю, что я мог бы применить стиль к document, есть какая-нибудь хорошая идея?

https://codesandbox.io/s/frosty-newton-icl0e

Ответы [ 2 ]

1 голос
/ 05 марта 2020

Вам просто нужно обернуть <Modal /> другим div, который будет «оверлеем» и будет иметь темный фон 

const ModalContainer = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5)
`;

<ModalContainer>
  <Modal>I am a modal, I want to be special.</Modal>
</ModalContainer>

Рабочий пример: https://codesandbox.io/s/friendly-lake-ic9jx

Если вы хотите разместить модал точно по центру, вы можете использовать flexbox 

const ModalContainer = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
`;

const Modal = styled.div`
  background: #fff;
  border: 1px solid #000;
  padding: 20px;
  min-height: 200px;
`;
0 голосов
/ 05 марта 2020

Это можно сделать с помощью CSS. Изменить уровень непрозрачности для других элементов. Свойства, которые могут вам потребоваться, будут filter и opacity Попробуйте Ant Design , так как вы используете React JS. В нем предварительно собраны компоненты со свойствами, такими как visible, чтобы сделать фон темнее, когда какой-либо элемент активен.

...