Как сделать красивые модальные окна с размытым фоном на CSS3?

Question

[EgorPt]

Нужна помощь:

Есть всплывающие, модальное окно.
Нужно сделать blur/размытый фон вокруг модального окна в виде содержания страницы.

Те если открыть модальное в какой бы то ни было точке страницы
То фон вокруг она будет отображать часть страницы, но быть рамытым.

Несколько примеров нашел(ниже) но реализвать пока не смог.
Прошу у вас совета-помощи, если есть ссылки на уроки/решения – очень рад буду =).

Пример на скриншоте
(Банк Тинькофф):


Код CSS3:

-webkit-backface-visibility:hidden;
filter:url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><filter id="blur"><feGaussianBlur stdDeviation="7" /></filter></svg>#blur');
-webkit-filter:blur(7px);
-moz-filter:blur(7px);
-ms-filter:blur(7px);
filter:blur(7px)

НАЙДЕННЫЕ РЕШЕНИЯ

1. www.blurjs.com
- по ходу универсальное решение, но не хочется грузить лишний JS, плюс возможные конфликты с другим JS на сайте =)

2.
Решение – совет… но прикрутить пока не смог
(подскажите если можете):

CSS: .blurred { -webkit-filter: blur(7px); -webkit-transition: all 2s;}

JS: $("body").children().not("#modal").addClass("blurred");

ВСЕМ ОТКЛИКНУВШИМСЯ ЗАРАНЕЕ БОЛЬШОЕ СПАСИБО!

Comments

[Иван]

Можете ещё раз загрузить скриншот с сайта Тинькофф? Сейчас он не отображается.

Answer 1

[Артём Н]

<div class="wrapper wrapper_blur">
  <div class="content"></div>
</div>
<div class="modal"></div>

.wrapper_blur {
  filter: blur(10px);
}

При вызове модального окна всей обёртке нужно применить класс .wrapper_blur

Answer 2

[serenia1]

Артем Н можно сделать лучше. Вот для бутстрапа. Не нужно ничего менять просто добавьте в css

.modal-open>*:not(.modal) {
  filter: blur(5px);
}