js居中弹出遮罩层---遮罩ActiveX控件

  最近项目要求做一个js弹出遮罩层，第一反应是设置Style的Z-Index属性控制层次，但页面中含有ActiveX控件，ActiveX默认永远显示在最顶层，问了下度娘，解决方法是：在IE6以后版本存在称之为shim的解决办法，在当前页面创建一个iframe，其z-index比当前的要高，则这个 iframe会呈现在最上方，然后将弹出的div的z-index设置比这个iframe的要高，此时弹出的div就能遮罩住ActiveX控件了。

下面是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>lockedScreen</title>
<style>
 #box{
   height:30px;
   width:110px;
   text-align:center;
   line-height:30px;
   font-size:12px;
   position:absolute;
   display:none;
   border:1px solid #ccc;
   z-index:9999;
   background:#acf6ef;
 }
 #screen{
   position:absolute;
   top:0;
   left:0;
   opacity:0;
   filter:alpha(opacity=0);
   background:#000;
   z-index:9998;
 }
 #DragIframe{
   position:absolute;
   top:0;
   left:0;
   height:0;
   width:0;
   opacity:0;
   filter:alpha(opacity=0);
   z-index:9997;
 }
</style>
</head>
 <body>
  <input type='button' id='button' value='卸载'/>
 <iframe id='DragIframe'>
 </iframe>
 <div id="box">
    正在卸载。。。
    <input type='button' id='cancel' value='取消'/>
  </div>
  <div id='screen'></div>
 <script src="index.js"></script>
 </body>
</html>

js代码：

window.onload=function(){
  var button=document.getElementById('button'),
      box=document.getElementById('box'),
      cancel=document.getElementById('cancel');
  button.onclick=function(){
     unload(box);
  };
  cancel.onclick=function(){
     cancelUnload(box);
  };
};
//卸载
function unload(id){
       var  oDragIframe=document.getElementById('DragIframe').contentWindow, 
            tDragIframe=document.getElementById('DragIframe');
            tDragIframe.style.width   =   '100%';  
            tDragIframe.style.height   ='100%';             
            oDragIframe.document.open();  
            oDragIframe.document.writeln('<html   xmlns="http://www.w3.org/1999/xhtml><head>');  
            oDragIframe.document.write('<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312"   />');  
            oDragIframe.document.writeln('</head><body>');   
            oDragIframe.document.writeln('</body></html>');  
            oDragIframe.document.close(); 
   var  screen=document.getElementById('screen'),
        left=(getInner().width-parseInt(getStyle(id,'width')))/2,
        top=(getInner().height-parseInt(getStyle(id,'height')))/2;
        id.style.top=top+'px';
        id.style.left=left+'px';
        id.style.display="block";
        screen.style.opacity = 0.2;
        screen.style.filter = 'alpha(opacity=' +20+')';
        screen.style.width='100%';
        screen.style.height='100%';
        screen.style.display='block';
}
//取消
function cancelUnload(id){
   var  tDragIframe = document.getElementById('DragIframe');
        tDragIframe.style.width  =  0;  
        tDragIframe.style.height =0;     
   var  screen=document.getElementById('screen');
        id.style.display="none";
        screen.style.opacity = 0;
        screen.style.filter = 'alpha(opacity=' +0+')';
        screen.style.width='0';
        screen.style.height='0';
        screen.style.display='none';
}
//跨浏览器获取当前窗口的高度和宽度
function getInner() {
    if (typeof window.innerWidth != 'undefined') {
        return {
            width : window.innerWidth,
            height : window.innerHeight
        }
    } else {
        return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
};
//跨浏览器获取style
function getStyle(element, attr) {
    var value;
    if (typeof window.getComputedStyle != 'undefined') {//W3C
        value = window.getComputedStyle(element, null)[attr];
    } else if (typeof element.currentStyle != 'undeinfed') {//IE
        value = element.currentStyle[attr];
    }
    return value;
};

 运行结果：

posted @ 2013-08-17 21:42  hy小辣椒  Views(825)  Comments(0)    收藏  举报