首页 > 代码库 > 简易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实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。