首页 > 代码库 > 简易DIV垂直居中阴影层笼罩JS实现

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

 

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