简易DIV垂直居中阴影层笼罩JS实现

$(document).ready(init);
function init() {

    var h = $(window).height();
    var w = $(window).width();

    /*
    *@param 传相应Id
    *@description 显示相应ID内容 同时加上阴影层  点击阴影层隐藏 点击内容项不隐藏
    */
    function show(id) {
        var _this = $(‘#‘+ id);
        _this.wrap(‘<div id=\‘blackBg\‘ style=\‘width: 100%; height: 100%; position: fixed; z-index: 1000; background: rgba(0, 0, 0, 0.6); top: 0; left: 0;\‘>‘)
        .show().css(‘top‘,(h - _this.height()) / 2);
        $(‘#blackBg‘).click(function(e) {
            var _e = e;
            var source = getTarget(_e,‘blackBg‘);
            if(source) {
                _this.unwrap(‘#blackBg‘).hide();
            }
        });

        var getTarget = function(e,Pid) {
            var target = e.target || e.srcElement;
            if(target.id == Pid) {
                return true;
            }

            return false;
        }
    }

    //引用  显示
    $(‘#hg‘).click(function() {
        show(‘change‘);
    });

    /*
    *@param 传相应Id
    *@description 点击阴影层内容项隐藏
    */
    function hide(id) {
        var _this = $(‘#‘ + id);
        _this.click(function() {
            var blackBg = document.getElementById(‘blackBg‘);
            if(!!blackBg) {
                $(‘#blackBg‘).trigger(‘click‘);
            }
            else {
                console.log(‘#blackBg element is not exist!‘);
            }
        });
    }

    hide(‘cancle‘);
}