又做了个lightbox，自认为质量比较高

最近工作中需要用这个，心想以前自己也做过一个，但基本上是抄的网上的，容错效果不佳，正巧手上有本john resig的“精通javascript”，在里面取了点经，自己便写了一个新的lightbox，自认为质量比较高，现在拿到网上来晒晒，看到的网友们一同分享吧。

var de=document.documentElement;
function resetCSS(elem,prop){for(var i in prop){elem.style[i]=prop[i];}}
//滚动条位置
function scrollX(){return self.pageXOffset||de&&de.scrollLeft||document.body.scrollLeft;}
function scrollY(){return self.pageYOffset||de&&de.scrollTop||document.body.scrollTop;}
//可视尺寸
function windowW(){return self.innerWidth||de&&de.clientWidth||document.body.clientWidth;}
function windowH(){return self.innerHeight||de&&de.clientHeight||document.body.clientHeight;}
//页面尺寸（最小不小于可视尺寸）
function pageW(){var s=document.body.scrollWidth;var c=windowW();return s>c?s:c;}
function pageH(){var s=document.body.scrollHeight;var c=windowH();return s>c?s:c;}
//lightbox显示和隐藏
function showOverlay(overId,w,h,href){
  //内容
  var innerhtml="<div style='width:100%;margin:0 auto;position:absolute;top:0px;padding-top:8px;text-align:center;background-color:#fff' id='overprogress'>正在加载</div><iframe scrolling='no' frameborder='0' src='"+href+"' width='100%' height='100%'></iframe>";
  //建立lightbox
  var over=document.createElement("div");
  var over2=document.createElement("div");
  document.body.appendChild(over);
  document.body.appendChild(over2);
  over.id=overId;
  //重设lightbox尺寸和位置
  function resetOver(){
    //设定遮掩层尺寸
 resetCSS(over,{position:"absolute",zIndex:"998",top:"0px",left:"0px",backgroundColor:"gray",opacity:"0.5",filter:"alpha(opacity=80)",width:pageW()+"px",height:pageH()+"px"});
    //设定弹出层尺寸和位置
 var eh=windowH()-h;
    var ew=windowW()-w;
    eh=eh<0?0:eh;
    ew=ew<0?0:ew;
    resetCSS(over2,{position:"absolute",zIndex:"999",width:w+"px",height:h+"px",left:scrollX()+parseInt(ew/2)+"px",top:scrollY()+parseInt(eh/2)+"px",overFlow:"hidden"});
  };
  resetOver();
  window.onresize=resetOver;
  window.onscroll=resetOver;
  //点击遮掩层则撤销lightbox
  over.onclick=function(){document.body.removeChild(over);document.body.removeChild(over2);};
  over2.innerHTML=innerhtml;
}

 

页面上调用如下:showOverlay('overlay',280,160,'youhtml.html‘);

大家可以自己做适当的修改来适应自己的需要。