简易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');
}
上一篇:linux下用Apache一个IP多个域名建虚拟主机


下一篇:CUDA学习笔记(一)——CUDA编程模型