点击弹出一个视频层,然后点击页面任何地方层隐藏，并带有遮罩层修饰

1.HTML代码

点击按钮:

<span class="play_video"></span>

弹出视频播放层:

<div class="video" style="display:none;">
    <video class="url_video" src="__PUBLIC__/Home/video/blazblue_video.mp4" x-webkit-airplay="true" webkit-playsinline="true" poster="__PUBLIC__/Home/img/blazblue_client/m_video.png" preload="null" autoplay loop="loop" controls="controls"></video>
</div>

2.CSS代码

/*遮罩层*/
.masked{
    opacity:0.3;
    filter: alpha(opacity=30);
    background-color:#000;
}

3.jQuery代码

　　/*弹出视频播放层*/
    $(function(){
        $(".play_video").click(function(){
            $("#fullpage div:first-of-type").addClass("masked");/*点击添加遮罩层CSS*/
            $(".video").show();
        });
        $(document).bind("click",function(e){
            var target  = $(e.target);
            if(target.closest(".play_video,.video").length == 0){/*.closest()沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止，返回包含零个或一个元素的 jQuery 对象。*/
                $(".video").hide();
                $("#fullpage div:first-of-type").removeClass("masked");/*点击其他区域隐藏遮罩层CSS*/
            };
            e.stopPropagation();
        })
    });