Есть ли способ размыть всю страницу и сфокусировать определенный div с помощью jquery / javascript?

Question

Есть ли способ размывать всю страницу (например, установить новый фон и выдать его на передний план с z-index) и сфокусировать определенный div (скажем, сообщение об ошибке) с помощью jquery / javascript?Вы знаете какой-нибудь плагин для этой цели?

Вот что я хочу получить:

Answer 1

Вы можете использовать диалоговое окно jQuery UI и использовать CSS для изменения наложенного фона div с размытым фоновым изображением, как здесь:

http://css -tricks.com / examples / BlurryBackgroundEffect /

- или -

Вы можете использовать диалоговое окно jQuery UI, смешанное с эффектом размытия текста CSS, найденным здесь:

http://motyar.blogspot.com/2010/04/blur-effect-with-css-and-jquery.html

Тем не менее, я предполагаю, что это НЕ будет обратно совместимо с браузерами, отличными от html 5.

Вот скрипка JS для подтверждения концепции: http://jsfiddle.net/khalifah/vgGtK/

Вот тот стиль, который, я думаю, вам нужен: http://jsfiddle.net/khalifah/7L5jG/