jsp弹出层

最新推荐文章于 2024-08-14 23:30:40 发布

weixin_33755847

最新推荐文章于 2024-08-14 23:30:40 发布

阅读量585

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1450300/blog/291857

版权

2019独角兽企业重金招聘Python工程师标准>>>

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>，实现的效果就是是整个页面呈现阴影，而且不可以操作被覆盖的内容；

转载于:https://my.oschina.net/u/1450300/blog/291857