Css. filter: blur, как установить размытое body и не размытое модальное окно?

Question

[hadaev_ivan]

https://premium.wpmudev.org/project/e-commerce/
Вот собственно пример того как должно работать(кликните на просмотр видео, или любую картинку), body размытое, модалка - чистая. Для размытия они используют filter: blur(...), но вот что они используют чтобы размытие не распространялось на ребенка-айфрейм понять не могу. Подскажите, пожалуйста)
Да, хороший комментарий ниже, подсказал ответ, но это не то что я хотел бы услышать. Есть ли способ размыть body, и оставить чистой модалку?
Функционал нужен для расширения, которое будет "размывать" сайт.

Answer 1

[tennalian]

ну там два div {position: fixed}, у одного размытие, а другое - модальное окно prntscr.com/5cd6hd

Comments

[hadaev_ivan]

Да, спасибо, невнимателен, вопрос поправил

[tennalian]

Ну, к ответу на ваш вопрос, этот функционал - css) аналогичным образом делайте, только размытому блоку background-color: transparent

[hadaev_ivan]

а если на сайте background-image весит на body, как мне провернуть размытие всей страницы за исключением моей модалки в таком случае?

[tennalian]

hogddttr27: ну е-мое, никто не вешает фильтр на боди, делайте как в примере, что вы дали. Два дива с позишн фиксед, один размыт, другой - модалка.

[swcalc]

tennalian: а как поступить, если нужно размыть и сами элементы? Не только картинку, лежащую в бакграунд, но и html элементы в body?

[tennalian]

swcalc: попробуйте немного изменить структуру. Добавьте все элементы в отдельный блок, а popup блок вынесите за него. И при всплытии модального окна вешайте на тот блок с элементами класс blur

[swcalc]

tennalian: Простите, задачу не описал полностью, имеется элемент, олицетворяющий динамическое окно, которое может перекрывать часть элемента. То есть идея такова, что нужно будет размывать область под этим блоком-окном.