又做了个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‘);

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

转载于:https://www.cnblogs.com/Cyto/archive/2009/01/12/1373963.html