DIV 模拟模态窗口

最新推荐文章于 2019-08-17 11:46:40 发布

notcool

最新推荐文章于 2019-08-17 11:46:40 发布

阅读量609

点赞数

分类专栏： javascript 文章标签： div function null ie button filter

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
  <style>
   #id1{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:49;display:none; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);}
   #id2{top:200px;position:absolute;z-index:50;display:none;border:3px solid #E5E5E5; left:100px;background-color:white;}
  </style>
  <include file="ddd.html">
</head>
<body οnlοad="divshow('弹出的层')">
  lsafjowej <input type="button" οnclick="divshow('弹出的层')" value="弹出窗口">


  <script>
   function divshow(showmsg){ //弹出窗口
    document.getElementById("id1").style.height=window.screen.height+"px";
    document.getElementById("id1").style.width=window.screen.width+"px";
    document.getElementById("id1").style.display='block';
    document.getElementById("id2").style.display='block';
    document.getElementById("ShowMSG").innerText = showmsg;
   }
   function divhide(){ //隐藏窗口
    document.getElementById("id1").style.display='none'
    document.getElementById("id2").style.display='none'
   }

   self.onError=null;
   currentX = currentY = 0;
   whichIt = null;
   lastScrollX = 0; lastScrollY = 0;
   NS = (document.layers) ? 1 : 0;
   IE = (document.all) ? 1: 0;
   
   function heartBeat() {
    if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
    if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
    if(diffY != lastScrollY) {
     percent = .1 * (diffY - lastScrollY);
    if(percent > 0) percent = Math.ceil(percent);
    else percent = Math.floor(percent);
    if(IE) document.all.id2.style.pixelTop += percent;
    if(NS) document.id2.top += percent;
    lastScrollY = lastScrollY + percent;
   }
   if(diffX != lastScrollX) {
    percent = .1 * (diffX - lastScrollX);
    if(percent > 0) percent = Math.ceil(percent);
    else percent = Math.floor(percent);
    if(IE) document.all.id2.style.pixelLeft += percent;
    if(NS) document.id2.left += percent;
    lastScrollX = lastScrollX + percent;
    }
   }
   
   
   function checkFocus(x,y) {
    stalkerx = document.id2.pageX;
    stalkery = document.id2.pageY;
    stalkerwidth = document.id2.clip.width;
    stalkerheight = document.id2.clip.height;
    if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
    else return false;
   }
   function grabIt(e) {
    if(IE) {
     whichIt = event.srcElement;
     while (whichIt.id.indexOf("id2") == -1) {
     whichIt = whichIt.parentElement;
     if (whichIt == null) { return true; }
     }
    whichIt.style.pixelLeft = whichIt.offsetLeft;
    whichIt.style.pixelTop = whichIt.offsetTop;
    currentX = (event.clientX + document.body.scrollLeft);
    currentY = (event.clientY + document.body.scrollTop);
    } else {
      window.captureEvents(Event.MOUSEMOVE);
      if(checkFocus (e.pageX,e.pageY)) {
       whichIt = document.id2;
       stalkerTouchedX = e.pageX-document.id2.pageX;
       StalkerTouchedY = e.pageY-document.id2.pageY;
      }
    }
    return true;
   }

   function moveIt(e) {
    if (whichIt == null) { return false; }
    if(IE) {
     newX = (event.clientX + document.body.scrollLeft);
     newY = (event.clientY + document.body.scrollTop);
     distanceX = (newX - currentX);    distanceY = (newY - currentY);
     currentX = newX;    currentY = newY;
     whichIt.style.pixelLeft += distanceX;
     whichIt.style.pixelTop += distanceY;
     if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
      if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
     if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
     event.returnValue = false;
    } else {
     whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
     if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
     if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
     if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
     if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
     return false;
    }
    return false;
   }
   function dropIt() {
    whichIt = null;
    if(NS) window.releaseEvents (Event.MOUSEMOVE);
    return true;
   }
   
   if(NS) {
    window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
    window.onmousedown = grabIt;
    window.onmousemove = moveIt;
    window.onmouseup = dropIt;
   }
   if(IE) {
   document.onmousedown = grabIt;
   document.onmousemove = moveIt;
   document.onmouseup = dropIt;
   }
   if(NS || IE) action = window.setInterval("heartBeat()",1);
</script>
</body>
</html>

notcool

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV 模拟模态窗口

#id1{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:49;display:none; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);} #id2{top:200px;position:
复制链接

扫一扫

专栏目录