Html + JQuery 点击图片弹出视频加蒙版，全局居中并且可关闭

html代码

//点击的图片
<div class="sp">
    <img src="图片路径" alt="">
</div>

//弹出的视频和蒙版
<div class="sp_main">
        <div class="video-div" style="width: 668px;height: 388px; display: none;z-index: 2000;">
            <video class="video" src="视频路径" controls="controls" width="668" height="388" autoplay>
                您的浏览器不支持 video 标签。
             </video>
             <button style="position: relative;margin-left: 640px;top: -385px;cursor: pointer;" class="videoBtn">X</button>
        </div>
        <div class="mb" style="width: 100%;height: 3140px;background-color: black;z-index: 1000;top: 0;left: 0;position: absolute;opacity: 0.5;display: none;"></div>
</div>

JQuery代码

$(function(){
$('.sp img').on('click',function(){
        $('.mb').show()
        showSp($('.video-div'))
    });
    $('.videoBtn').on('click',function(){
        $('.mb').hide()
        $('.video-div').hide()
        
    })
    function showSp(obj){
        $(obj).show();
        center(obj);
        $(window).scroll(function(){
        center(obj);
        });
        $(window).resize(function(){
        center(obj);
        }); 
    }
    function center(obj){
        var windowWidth=$(window).width();
        var windowHeight=$(window).height();
        var popupHeight = $(obj).height();   
        var popupWidth = $(obj).width();    
        $(obj).css({   
            "position": "absolute",   
            "top": (windowHeight-popupHeight)/2+$(document).scrollTop(),   
            "left": (windowWidth-popupWidth)/2   
        });  
    };
})