jQuery模糊div不清晰

Question

编辑：您可以在这里看到我的代码：unf.edu/~n00804716/site/work.html

我试图在打开 iframe 时使用 jQuery 模糊某个部分。 iframe 最初是隐藏的，但在单击按钮时显示为所有内容上方的固定元素。我找到了一种方法来做到这一点，但它需要过多的代码。所以，我试着减少一点，但无法让它发挥作用。这是我拥有的：

$('#slides iframe').hide();

$("span").click(function() {
    $("#slides iframe").fadeIn(300);
});

$('#slides iframe').each(function(){
    if ( $(this).css('display') == 'block')
    {
        $("section").css({
            'filter': 'blur(15px) greyscale(80%)'
        });
    } else {
        $("section").css({
            'filter': 'blur(0px) greyscale(0%)'
        });
    }
});

我的 HTML 是这样设置的：

<div id="slides">
   <div id="slide-2" class="slide">
      <iframe class="zoo-video"></iframe>
      <section>
          <span></span>
          /*other content*/
      </section>
   </div>
</div>

CSS:

#slides iframe {
    width: 90%;
    margin: 0 auto;
    height: 90%;
    z-index: 9999;
    position: absolute;
    right: 0;
    left: 0;
    top: 5%;
    bottom: 0;
}

#slides,
section {
    width: 100%;
}

此外，我不完全确定是否需要供应商前缀。有没有更简单的方法来做到这一点？诀窍是，iframe 是一个占屏幕 90% 的 vimeo 播放器。因此，当页面垂直滚动或用户在 iframe 外部单击时，我还需要将 iframe 设置为 close/collapse。当它折叠时，我需要它的部分不再有模糊或灰度。这是我用来在用户点击 iframe 外部时折叠 iframe 的代码：

$(document).mouseup(function (e) {
    var container = $("#slides iframe");
    if (!container.is(e.target)
        && container.has(e.target).length === 0)
    {
        container.fadeOut(230);
    }
});

Answer 1

http://jsfiddle.net/721nma0g/

$(document).ready(function () {
    var video = $("#slides iframe");
    $(document).mouseup(function (e) {
        if (!video.is(e.target) && !video.has(e.target).length) {
            video.removeClass("visible-video");
        }
    });

    $("button").click(function() {
        video.addClass("visible-video");
    });
});

与其用jQuery做那么多，我经常只是用JS设置一个class。使用 CSS 可以做的事比您想象的要多得多。重要的是 CSS。您有一个小的拼写错误（美国拼写与英国拼写）greyscale 与 grayscale。但是正如您所看到的 + 选择器在这里非常有用！ Select .visible-video 之后的元素，您可以定位您想要的部分！

iframe {
    display: none; /* Hide the video initially */
    width: 90%;
    margin: auto 5%;
    position: fixed;
    z-index: 20;
    top: 48px;
    box-shadow: 0 4px 36px rgba(0,0,0,0.72), 0 0 8px rgba(0,0,0,0.48);
}

.visible-video {
    display: block; /* show the video when the class has been set */
}
section {
    margin: 24px auto;
    width: 80%;
}
.visible-video + section {
    -webkit-filter: blur(15px) grayscale(80%);
    filter: blur(15px) grayscale(80%);
}

编辑：我改进了 iframe 的 CSS 代码，因此它可以更好地缩放，并且我包含了一些 JS 来检测用户是否单击了滚动条。如果不加这个，点击滚动条时iframe也会关闭。

这里是全屏结果：https://jsfiddle.net/721nma0g/5/embedded/result/

已编辑 jQuery：

if (!video.is(e.target) && !video.has(e.target).length && (e.target != $('html').get(0))) {
    video.removeClass("visible-video");
}

已编辑 CSS：

iframe {
    display: none;
    max-width: 90%;
    position: fixed;
    z-index: 20;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 36px rgba(0, 0, 0, 0.72), 0 0 8px rgba(0, 0, 0, 0.48);
}

在移动设备上也能很好地工作。

jQuery模糊div不清晰

jQuery blur div not in focus

javascript

css

jquery

blur

filter