Как размыть весь сайт кроме модального окна?

Question

[myskypesla]

Появляется модальное окно, использую библиотеку jsBox.

Нужно чтобы при открытии модального окна весь остальной сайт размывался.

При использовании filter blur на overlay, filter не срабатывает. Вот пример того, как я делал.

А хочется вот такой эффект размытия как на iPhone

Comments

[nirvimel]

Когда вижу такое даже не разбираюсь, что этим хотел сказать автор. Сразу отрезаю эдблокером модалку вместе с перекрывающей подложкой, и все отлично работает без нее. А вот если начать кликать по кнопкам в модалке, то вылетят еще десяток окон (просят почту, номер паспорта, размер трусов...), и все равно в итоге отрезать приходится.

Answer 1

[Vadim Bogomazov]

?

Comments

[myskypesla]

Точно также сделал, но за труд спасибо.

https://codepen.io/anon/pen/JJWRRL

Answer 2

[romy4]

Тебе не надо размывать весь сайт. Размываешь стандартную покрывающую подложку под модалкой

Comments

[Kovalsky]

Да, достаточно использовать для этого различные элементы - контент, подложка и модалка.

Answer 3

[maikttt]

В примере кажется размыты потому что там у блока #efefcts в качестве background сама картинка iPhon-а, и размывается она (создается эффект что оригинальная каринка размыта)
Можешь добавитть весь контент (кроме окно) в блок которого будешь размывать при открытии окна
Вот пример

P.S.: На codepen не обязательно писать весь html, только то что в body, а JS не обязательно поставить в $(document).ready, он и так там будет.

Comments

[myskypesla]

Спасибо за совет!

Answer 4

[Артур Витт]

Твой блюр сейчас размывает оверлей, и добавь оверлею прозрачности

Answer 5

[tyzberd]

добавить при открытии класс для body
и стили

.myClass * {
    filter: blur(10px);
}
.modal {
    filter: none;
}
.modal * {
    filter: none;
}