點擊彈出一個視頻層,然后點擊頁面任何地方層隱藏，並帶有遮罩層修飾

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