jquery - 选择主体但不选择模态以对模态背景应用模糊效果

Question

我使用 Bootstrap 模式。我使用什么模式并不重要，我的想法是应用模糊滤镜(尽管它只在 webkit 中支持)。

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

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

CSS

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

我写了这篇文章，但它将模糊效果应用于模态本身而不是主体。另一个问题是有没有办法做到这一点？适用于 body 会严重影响性能。

Answer 1

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

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

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