弹出div层

最新推荐文章于 2025-06-13 14:41:51 发布

凋零的老树

最新推荐文章于 2025-06-13 14:41:51 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

文章标签： div function string iframe null filter

本文链接：https://blog.youkuaiyun.com/kongxiangli/article/details/6428549

因为系统需要，最近用javascript写了个弹出div的类。刚开始没想自己写，觉得网上有很多，随便找一个就可以，可是找来的代码总是不能满足需求。主要存在几个问题，一是不能移动，二是弹出来的div层只能遮盖IFRAME里的子页面，不是遮盖整个页面，三是如果再弹出div层只能在固定前一个div 中。

解决方法是在顶层页面加载js文件，动态创建div层，顶层页面不能采用frameset。

顶层页面代码<body> <div id="header"> <iframe src="head.aspx" mce_src="head.aspx" width="100%" height="60px" name="FrameHead" id="FrameHead" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe> </div> <div id="index"> <table id="oTable" align="center" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr><td width="160px" style="vertical-align:top" mce_style="vertical-align:top"> <iframe src="TaskList.aspx" mce_src="TaskList.aspx" width="100%" name="FrameList" id="FrameList" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe> </td><td style="vertical-align:top" mce_style="vertical-align:top"> <iframe src="DoorCard/WebTest.aspx" mce_src="DoorCard/WebTest.aspx" width="100%" name="main" id="main" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe> </td></tr></table> </div> </body>

MoveDiv.js代码如下：

document.write("<style type=\"text/css\"><!--a:link, a:visited {text-decoration: none;} --></style>");

var isIe = (document.all) ? true : false;
var backID = "_backDiv";
var divID  = "_popDivID_";
var keepID = "_keepDiv_";

function CreateDiv(title, width, height, url) {
    showDiv(title, width, height, url, 1);
 }

function showDiv(title, width, height, url, floor) {
    if (isNaN(floor) || floor < 1) { return; } //防止非法调用

    closeDiv(floor); //防止重复调用
   
    var bWidth = parseInt(document.documentElement.scrollWidth);
    var bHeight = parseInt(document.documentElement.scrollHeight);
    
    if (floor == 1) { CreateBackDiv(); }

    var o = document.createElement("div");
    o.id = divID + String(floor);
    o.style.cssText = 'position:absolute;width:' + width + 'px;height:' + height + 'px;border: 1px solid #000000;float:left;z-index:1000;';
    //filter: alpha(opacity = 100);

    o.innerHTML = GetDivStr(title, height, floor);
    o.style.top = (bHeight - height) / 2 + "px"
    o.style.left = (bWidth - width) / 2 + "px";
    o.style.index = String(floor);

    o.onmousedown = KeepMouseDown;
    o.onmousemove = KeepMouseMove;
    o.onmouseup = KeepMouseUp;

    document.body.appendChild(o);

    //延迟加载
    setTimeout("document.frames['_MainChild" + String(floor) + "'].location.href='" + url + "';", 0);

   CreateKeepDiv(floor);
}

function CreateBackDiv() {
    CloseObj(backID);

    if (isIe) { setSelectState('hidden'); }

    var bWidth = parseInt(document.documentElement.scrollWidth);
    var bHeight = parseInt(document.documentElement.scrollHeight);

    var back = document.createElement("div");
    back.id = backID;
    var styleStr = "top:0px;left:0px;position:absolute;background:#666666;overflow:hidden;width:" + bWidth + "px;height:" + bHeight + "px;z-index:999;";
    styleStr += (isIe) ? "filter:alpha(opacity=40);" : "opacity:0.40;";
    //styleStr += "filter:alpha(opacity=40);opacity:0.40;";
    back.style.cssText = styleStr;

    document.body.appendChild(back);
}

function closeDiv(floor) {
     CloseObj(divID + String(floor));
     
	 CloseObj(keepID + String(floor));
     
	 if (floor == 1) { CloseObj(backID);}
    
	 setSelectState("");
}

function CreateKeepDiv(floor) {
    var popDiv = document.getElementById(divID + String(floor));
    var o = document.createElement("div");
    o.id = keepID + String(floor);
    o.style.cssText = "position:absolute;background:#666666;overflow:hidden;filter:alpha(opacity=0);z-index:1001;display:none";

    o.innerHTML = " ";
    o.style.top = popDiv.style.top;
    o.style.left = popDiv.style.left;
    o.style.width = popDiv.style.width;
    o.style.height = popDiv.style.height;
    o.style.index = String(floor);

    //o.onmousedown = KeepMouseDown;
    o.onmousemove = KeepMouseMove;
    o.onmouseup   = KeepMouseUp;

    document.body.appendChild(o);
}

function CloseObj(id) {
    var oDiv = document.getElementById(id);
    if (oDiv && oDiv != null) { oDiv.parentNode.removeChild(oDiv);}
 }

 var flag = 0;
 var minus_x = 0;
 var minus_y = 0;
 function KeepMouseDown(e) {
     var evt = e || window.event;

     if (window.event.srcElement.tagName == "A") { return; }
     
     if (document.setCapture) this.setCapture();
     if (window.captureEvents) window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);

     flag = 1;
     this.style.cursor = 'move';
     minus_x = evt.clientX - this.offsetLeft;
     minus_y = evt.clientY - this.offsetTop;

     //移动时有透明效果
     if (isIe) {
         this.setCapture();
         this.style.setAttribute("filters.alpha.opacity",40);   
         //this.filters.alpha.opacity = 40;
     }
     else {
         window.captureEvents(Event.MOUSEMOVE);
         this.style.opacity = 0.5;
     }
  }

  function KeepMouseUp(e) {
        var obj = document.getElementById(divID + String(this.style.index));

        if (document.releaseCapture) this.releaseCapture();
        if (window.releaseEvents) window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
        
        flag = 0;

        //去透明效果
        if (obj.filters.alpha && obj.filters.alpha != null) {
            obj.filters.alpha.opacity = 100;
        }
        else {
            obj.style.setAttribute("filters.alpha.opacity", 40);
        }

        document.getElementById(keepID + String(this.style.index)).style.display = "none";
    }

  function KeepMouseMove(e) {
      var keep = document.getElementById(keepID + String(this.style.index));
      var obj  = document.getElementById(divID + String(this.style.index));
      
      var evt = e || window.event;

      if (flag == 1) {
          
          keep.style.display = "";
          
          obj.style.left = parseInt(evt.clientX - minus_x) + 'px';
          obj.style.top = parseInt(evt.clientY - minus_y) + 'px';

          if (parseInt(evt.clientX - minus_x) < 0) { obj.style.left = "0px"; }
          if (parseInt(evt.clientY - minus_y) < 0) { obj.style.top = "0px"; }

          if (parseInt(evt.clientX - minus_x) > (document.body.clientWidth - parseInt(obj.style.width))) {
              obj.style.left = (document.body.clientWidth - parseInt(obj.style.width)) + 15;
          }
          
          var back = document.getElementById(backID);
          if (back != null) {
              if (parseInt(evt.clientY - minus_y) > (parseInt(back.style.height) - parseInt(obj.style.height))) {
                  obj.style.top = parseInt(back.style.height) - parseInt(obj.style.height) - 15;
              }
          }

          MoveFloor(keep, obj);
      } else {
          return null;
      }
  }

  window.onresize = ReSizeBackDiv;
  function ReSizeBackDiv() {
      window.onresize = null;
      var oDiv = document.getElementById(backID);
      if (oDiv && oDiv != null) { CreateBackDiv();}
      setTimeout(function () { window.onresize = ReSizeBackDiv; }, 0);
   }

//移动遮盖层 toObj-遮盖层 frmObj--被遮盖层
function MoveFloor(toObj, frmObj) {
    toObj.style.display = "";
    toObj.style.left = frmObj.style.left;
    toObj.style.top = frmObj.style.top;
    toObj.style.width = frmObj.style.width;
    toObj.style.height = frmObj.style.height;
}

function setSelectState(state) {
    var oArray = document.getElementsByTagName('select');
    for (var i = 0; i < oArray.length; i++) {
        oArray[i].style.visibility = state;
    }
}

function GetTimeID() {
    var toDate = new Date();
    return toDate.getHours() + "" + toDate.getMinutes() + "" + toDate.getSeconds() + "" + toDate.getMilliseconds(); // format("YYYY-MM-DD HH:mm:ss");
}

function GetDivStr(title, framHeight, floor) {
    var height = Number(framHeight) - 24;
    var popDiv = "";
    popDiv += "<style type=\"text/css\"><!--a:link, a:visited {text-decoration: none;} --></style>";
    popDiv += "<table align='center' width='100%' cellpadding='0' cellspacing='0' border='0'>";
    popDiv += "<tr style='background:#99CCCC;height:24px;'><td>" + title + "</td><td align='right'><a href=# onclick='closeDiv(" + floor + ");'>关闭</a>  </td></tr>";
    popDiv += "<tr><td colspan='2'>";
    popDiv += "<iframe id='_MainChild" + String(floor) + "' name='_MainChild" + String(floor) + "' height='" + String(height) + "px' frameborder='0' marginheight='0' marginwidth='0'  width='100%' src=''></iframe>";
    popDiv += "</td></tr>";
    popDiv += "</table>";
    //alert(popDiv);
    return popDiv;
}

在调用的时候，是顶层页面加载该js文件，所以页面之间相互传值跟一般的页面传值就有所不同了。

在WebTest.aspx页面调用弹出层代码如下

弹出一个 parent. CreateDiv("test", 750, 300, "a.aspx");

在a.aspx页面 parent.showDiv('test',400,200,'b.aspx', 1)