jimingminlovefly

思路：打開時，顯示遮罩層ShowMark()和div彈出層showDiv(divObj)；關閉時，隱藏遮罩層HideMark()和div彈出層closeDiv(divObj)。

一、蒙灰層
//顯示蒙灰層
function ShowMark(){
     var xp_mark=document.getElementById("xp_mark");
     if(xp_mark!=null) {
         //設置DIV
         xp_mark.style.left=0+"px";
         xp_mark.style.top=0+"px";
         xp_mark.style.position="absolute";
         xp_mark.style.backgroundColor="#000";
         xp_mark.style.zIndex="1";
         if(document.all) {
            xp_mark.style.filter="alpha(opacity=50)";
            var Ie_ver=navigator["appVersion"].substr(22,1);
            if(Ie_ver==6||Ie_ver==5){hideSelectBoxes();}
         }
         else{xp_mark.style.opacity="0.5";}
         xp_mark.style.width="100%";
//       var heights=XP_getPageSize().h;
//       if(heights<600) {
//         heights=620;
//       }
//       xp_mark.style.height=heights+"px";
         xp_mark.style.height=="100%";
         xp_mark.style.display="block";
     }
     else{
     //頁面添加div explainDiv,注意必須是緊跟body 內的第一個元素.否則IE6不正常.
     $("body").prepend("<div id='xp_mark' style='display:none;'></div>");
     ShowMark();//繼續回調自己
     } 
            
}

//隱藏蒙灰層
function HideMark(){
    var xp_mark=document.getElementById("xp_mark");
    xp_mark.style.display="none";   
    var Ie_ver=navigator["appVersion"].substr(22,1);
    if(Ie_ver==6||Ie_ver==5){showSelectBoxes();}
}

//獲取頁面的高度與寬度
function XP_getPageSize(){
    var pt = {w:0,h:0}; 
    if (window.innerHeight && window.scrollMaxY){ 
      pt.w = document.body.scrollWidth;
      pt.h = window.innerHeight + window.scrollMaxY;
    }
    else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
      pt.w = document.body.scrollWidth;
      pt.h = document.body.scrollHeight;
    }
    else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
      pt.w = document.body.offsetWidth;
      pt.h = document.body.offsetHeight;
    }
    return pt;
}

//顯示所有的下拉列表框
function showSelectBoxes(){
 selects = document.getElementsByTagName("select");
 for (i = 0; i != selects.length; i++) {selects[i].style.visibility = "visible"; }
}

//隱藏所有的下拉列表框
function hideSelectBoxes(){
 selects = document.getElementsByTagName("select");
 for (i = 0; i != selects.length; i++) {selects[i].style.visibility = "hidden";}
}

二、彈出顯示層div

//讓層居中顯示-老版本

function setDivToCenter(obj) {
 obj.style.position = "absolute";
 obj.style.zIndex = "222";
 obj.style.display = "block";
 
 var d = document.documentElement, b = document.body, w = window;
 var viewPort ={ left:0, top: 0, width:0, height:0};
 viewPort.top = b.scrollTop || d.scrollTop ; 
 viewPort.left = b.scrollLeft || d.scrollLeft ; 
 viewPort.height = w.innerHeight || d.clientHeight || b.clientHeight; 
 viewPort.width = w.innerWidth || d.clientWidth || b.clientWidth; 

 obj.style.top = (viewPort.top + viewPort.height/2 - obj.offsetHeight/2) + "px";
 obj.style.left = (viewPort.left + viewPort.width/2 - obj.offsetWidth/2) + "px";
}

//讓層居中顯示-新版本

function showDiv(obj){//頁面可以用obj == document.getElementById();
 $(obj).show().css({"zIndex":"222","position":"absolute"});
 center(obj);
 $(window).scroll(function(){
  center(obj);
 });
 $(window).resize(function(){
  center(obj);
 });
}

function center(obj){//頁面可以用obj == document.getElementById();
    var windowWidth = document.documentElement.clientWidth;  
   var windowHeight = document.documentElement.clientHeight;  
  
   var popupHeight =$(obj).height();  
   var popupWidth =$(obj).width();   
  
   $(obj).css({
    "top": (windowHeight-popupHeight-200)/2+$(document).scrollTop()+130,  
    "left": (windowWidth-popupWidth)/2  
   }); 
}

 

 //讓層居中隱藏
function closeDiv(obj){
    $(obj).hide();
    $(window).unbind();
}