Как сделать модальный диалог с размытым фоном с помощью Twitter-бутстрапа?

Bootstrap использует затемнение, когда он показывает модальный диалог. Как сделать эффект размытия на весь фон?

Ответ 1

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

<body>
   <div class="supreme-container">all your content goes here except for the modal</div>
   <div id="myModal" class="modal fade">This is your modal.</div>
</body>

И затем в css

body.modal-open .supreme-container{
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

Ответ 2

Если вы используете boostrap, ваш контент уже находится в каком-то контейнере. Таким образом, это работает для меня без необходимости изменять файл HTML или любой другой JS:

.modal-open .container-fluid, .modal-open  .container {
    -webkit-filter: blur(5px) grayscale(90%);
}

Ответ 3

Я думаю, что самый простой способ добиться этого - применить класс blur к фоновым элементам, используя jQuery, когда модаль открыт. Удалите blur, когда модальный объект закрыт...

.blur {
    box-shadow: 0px 0px 20px 20px rgba(255,255,255,1);
    text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
    transform: scale(0.9);
    opacity: 0.6;
}

http://bootply.com/74705