jQuery模糊div不在焦点

Question

EDIT: You can see my code working here: unf.edu/~n00804716/site/work.html

I am attempting to blur a section with jQuery when I open an iframe. The iframe is initially hidden, but appears as a fixed element above everything when a button is clicked. I have found one way to do this, but it requires an excessive amount of code. So, I tried to cut down a little, but can't get it to work. Here is what I have:

$('#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%)'
        });
    }
});

This is how my HTML is setup:

<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%;
}

Also, I'm not entirely sure if the vendor prefixes are necessary. Is there a much simpler way to do this? The trick is, the iframe is a vimeo player that takes up 90% of the screen. So, I also need the iframe to close/collapse when the page is scrolled vertically or if the user clicks outside of the iframe. When it collapses, I need it the section to no longer have a blur or grayscale. Here is the code I'm using to collapse the iframe when the user clicks outside of it:

$(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");
    });
});

Instead of doing so much with jQuery, I often just use JS to set a class. You can do so much more with CSS than you'd think. Of importance is the CSS. You had a small spelling error (US vs UK spelling) greyscale vs grayscale . But as you can see the + selector is very useful here! Select the element following .visible-video and you can target the section that you want!

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%);
}

---

EDIT: I improved the CSS code of the iframe, so it'll scale better, and I included some JS that will detect if the user has clicked on the scrollbar or not. Without this addition, the iframe will also close when clicking the scrollbar.

Full screen result here: https://jsfiddle.net/721nma0g/5/embedded/result/

Edited jQuery:

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

Edited 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);
}

Works great on mobile too.