简易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');

}