微微族

弹出层经常用到，编辑修改，提交小东西等，下面总结一下自己用到过的几类弹出层。

1：简单的显示隐藏div

   function Show()
    {
        document.getElementById('bot').style.display = '';
    }
    function Hide()
      {
           document.getElementById('bot').style.display = 'none';
      }

     <a  href="#"   onclick="Show('<%#Eval("ID")%>','<%#Eval("val1") %>')">修 改</a>

     <div id="bot" style="z-index:100; border:1px solid #333;  height:360px; width:301px; padding:20px; display:none; position:absolute; left:20%; top:20%; background:#f3f3f3">
      用户名：
      <input type="button" id="Button2"  value="取 消"
      style="height: 21px; margin-top:30px;" onclick="Hide()"  />
    </div>

2: 可以鼠标拖动的，并且背景置灰的

// JScript 文件
function openBg(state){ //遮照打开关闭控制
 if(state == 1)
 {
   document.getElementById("bg").style.display = "block";
 document.getElementById("bg").style.width =  getPageSize(2) + "px";
  document.getElementById("bg").style.height = getPageSize(1) + "px";
 }
 else
 {
  document.getElementById("bg").style.display = "none";
 }
}

function AfterSelect(state){ //中心层关闭打开控制
 if(state == 1)
 {
  document.getElementById("jubaodivback").style.display = "block";
  document.getElementById("jubaodivback").style.left = (document.getElementById("bg").offsetWidth - document.getElementById("jubaodivback").offsetWidth)/2 + "px";
  document.getElementById("jubaodivback").style.top = document.body.scrollTop + 100 + "px";
  document.getElementById("jubaodivback").style.position = "absolute";
  document.getElementById("jubaodivback").style.zIndex = "2000";
 }
 else
 {
  document.getElementById("jubaodivback").style.display = "none";
 }
}

function openSelect(state){ //中心层关闭打开控制
 if(state == 1)
 {
    document.body.scrollTop = document.body.scrollTop -100;

  document.getElementById("jubaodiv").style.display = "block";
  document.getElementById("jubaodiv").style.left = (document.getElementById("bg").offsetWidth - document.getElementById("jubaodiv").offsetWidth)/2 + "px";
  document.getElementById("jubaodiv").style.top = document.body.scrollTop + 100 + "px";
  document.getElementById("jubaodiv").style.position = "absolute";
  document.getElementById("jubaodiv").style.zIndex = "200000000";
 }
 else
 {
  document.getElementById("jubaodiv").style.display = "none";
 }
}

//获取页面实际大小
function getPageSize(type){
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {
        xScroll = document.body.scrollWidth;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) {    // all except Explorer
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }
    // for small pages with total height less then height of the viewport
    if(yScroll < windowHeight){
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }
    // for small pages with total width less then width of the viewport
    if(xScroll < windowWidth){
        pageWidth = windowWidth;
    } else {
        pageWidth = xScroll;
    }
  //  arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
  if(type==1)
  {
    return pageHeight;
    }
    if(type==2)
    {
     return pageWidth;
    }
}

/* 鼠标拖动 */
var oDrag = "";
var ox,oy,nx,ny,dy,dx;
function drag(e,o){
 var e = e ? e : event;
 var mouseD = document.all ? 1 : 0;
 if(e.button == mouseD)
 {
  oDrag = o.parentNode;
  ox = e.clientX;
  oy = e.clientY;
 }
}
function dragPro(e){
 if(oDrag != "")
 {
  var e = e ? e : event;
  dx = parseInt(document.getElementById("jubaodiv").style.left);
  dy = parseInt(document.getElementById("jubaodiv").style.top);
  //dx = document.getElementById(oDrag).document.offsetLeft;
  //dy = document.getElementById(oDrag).offsetTop;
  nx = e.clientX;
  ny = e.clientY;
  document.getElementById("jubaodiv").style.left = (dx + ( nx - ox )) + "px";
  document.getElementById("jubaodiv").style.top = (dy + ( ny - oy )) + "px";
  ox = nx;
  oy = ny;
 }
}
document.onmouseup = function(){oDrag = "";}
document.onmousemove = function(event){dragPro(event);}

.....

举报该用户

3：多个div显现与隐藏

   New Document
  


房屋信息

房屋出租


商用房

餐饮娱乐


婚恋交友

男士征婚





  

4：滑动门
此类型简单，目前没有具体代码，用到的时候再说吧。

asfasdfa