Форум Сайтостроение Веб-строительство

Как сделать всплывающее окно с размытием фона страницы?

V
На сайте с 04.06.2014
Offline
54
victorpavloff
2097

На сайте http://callbackhunter.com/ при клике на телефон в правом нижнем углу появляется окно, и фон за окном размывается. Как можно реализовать такую штуку?

Пытался сделать с помощью фильтра blur, вешая свойства размытия на body,

но тогда у меня и окно тоже полностью размыто. Сделать только размытие фона никак не получается.

Партнёрка №1 в essay-нише (https://goo.gl/YfTPtG)
AE
На сайте с 31.10.2009
Offline
65
Art.ewgen
#1

Обертке всего контента, например <main/> добавлять класс .blur, а модальное показывать вне этой обертки и над ней. 


.blur {

   -webkit-filter: blur(3px);

   -ms-filter: blur(3px);

   -moz-filter: blur(3px);

   -o-filter: blur(3px);

   filter: blur(3px);

   filter: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%2…   3CfeGaussianBlur%20stdDeviation%3D%223%22/%3E%3C/filter%3E%3C/svg%3E#blur");

}

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий