jsp弹出层是通过控制不同div层的显示来实现的。
jsp页面内容:
<div id="maskBackground"></div>
<div id="toolTipDiv" style="display: none;border: 20px; border-color: red"></div>
样式:
<style type="text/css">
#maskBackground{ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background:#46a7d2; z-index:499; -moz-opacity: 0.7; opacity:.100; filter: alpha(opacity=100);}
</style>
js函数:
var layoutControl = {
show : function(divid,titleid){
divCenter(divid);
$('#'+divid).fadeIn('show');
if(typeof(titleid)!='undefined'){
//ddraggable(titleid , divid);
}
},
hide : function(divid){
$('#'+divid).css('display', 'none');
$('#maskBackground').css('display', 'none');
$('#'+divid).fadeOut('hide');
},
remove : function(divid){
$('#'+divid).css('display', 'none');
//$('#maskBackground').css('display', 'none');
$('#'+divid).fadeOut('hide');
},
yoffset : 0
}
function divCenter(div_id){
var divid = '#'+div_id;
var divHeight = parseInt($(divid).height());
var divWidth = parseInt($(divid).width());
var divLeft = parseInt((document.documentElement.clientWidth-divWidth)/2);
var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
var divTop = document.documentElement.clientHeight/2 + scrollTop - (divHeight/2);
$('#maskBackground').css('display', 'block');
$('#maskBackground').css('height',document.body.scrollHeight);
$(divid).css({position:'absolute',top:divTop,left:divLeft,zIndex:902});
}
//使用js函数控制弹出层的显示和隐藏:
function showToolTip(){
layoutControl.show('toolTipDiv','提示框');
}
function closeToolTip(){
layoutControl.hide('toolTipDiv');
}
分析:
让maskBackground层在原来的层之上,又让toolTipDiv层在maskBackground之上显示。
固定一个控件,或层的位置,就可以实现,该元素在其他控件之上显示:
$(divid).css({position:'absolute',top:divTop,left:divLeft,zIndex:902});
不管原来在这个jsp上这个位置有什么内容,现在这个div会在该位置,其上显示。
使用<div id="maskBackground"></div>,实现的效果就是是整个页面呈现阴影,而且不可以操作被覆盖的内容;