选择正文但不采用模态为模态背景应用模糊效果

Question

我使用bootstrap模态。我使用什么模态并不重要，这个想法是应用模糊过滤器（虽然它只在webkit中支持）。

    $myModal.on('shown.bs.modal', function () {

        $(body).addClass('modalBlur'); 
)

CSS

.modalBlur{
-webkit-filter: blur(5px) grayscale(50%);
}

我写了这个，但它将模糊效果应用于模态本身而不是身体。另一个问题是有没有办法做到这一点？适用于身体会对表演造成重创。

Answer 1

请尝试处理show事件。此外，您可能希望将modalBlur应用于容器而不是整个身体，因为这会使模态模糊。

$('#myModal').on('show.bs.modal', function () {
   $('.container').addClass('blur');
})

演示：http://www.bootply.com/91532