div层实现IE Firefox 页面半透明遮罩效果弹窗

最新推荐文章于 2021-06-07 13:32:51 发布
iteye_7153
最新推荐文章于 2021-06-07 13:32:51 发布
阅读量182
点赞数
分类专栏： javascript 文章标签： IE Firefox CSS JavaScript HTML ViewUI
javascript 专栏收录该内容
9 篇文章
订阅专栏
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="test.css" media="screen" rel="stylesheet" type="text/css" />
<title>IE-firfox-弹出 背景 拖动层</title>
<script type="text/javascript">
//获取滚动条的高度
function getPageScroll(){
    var xScroll,yScroll;
    if (self.pageYOffset) {
    yScroll = self.pageYOffset;
    xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop){
    yScroll = document.documentElement.scrollTop;
    }else if (document.documentElement && document.documentElement.scrollLeft){
    xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {
    yScroll = document.body.scrollTop;
    xScroll = document.body.scrollLeft;
    }
    arrayPageScroll = new Array(xScroll,yScroll)
    return arrayPageScroll;
}
//获取页面实际大小
function getPageSize(){
    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){
    sScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
    } else {
    xScroll = document.body.offsetWidth;
    yScroll = document.body.offsetHeight;
    }
    var windowWidth,windowHeight;
    //var pageHeight,pageWidth;
    if (self.innerHeight) {
    windowWidth = self.innerWidth;
    windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
    } else if (document.body) {
    windowWidth = document.body.clientWidth;
    windowHeight = document.body.clientHeight;
    }
    var pageWidth,pageHeight
    if(yScroll < windowHeight){
    pageHeight = windowHeight;
    } else {
    pageHeight = yScroll;
    }
    if(xScroll < windowWidth) {
    pageWidth = windowWidth;
    } else {
    pageWidth = xScroll;
    }
    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
    return arrayPageSize;
}
//弹出层
function openLayer(objId,conId,w,h){
    var arrayPageSize   = getPageSize();//调用getPageSize()函数
    var arrayPageScroll = getPageScroll();//调用getPageScroll()函数
    if (!document.getElementById("popupAddr")){
        //创建弹出内容层
        var popupDiv = document.createElement("div");
        //给这个元素设置属性与样式
        popupDiv.setAttribute("id","popupAddr")
        popupDiv.style.position = "absolute";
        popupDiv.style.zIndex = 99;
        popupDiv.style.width = w + "px";
        popupDiv.style.height = h + "px";
        //创建弹出背景层
        var bodyBack = document.createElement("div");
        bodyBack.setAttribute("id","bodybg")
        bodyBack.style.position = "absolute";
        bodyBack.style.width = "100%";
        bodyBack.style.height = (arrayPageSize[1] + 35 + 'px');
        bodyBack.style.zIndex = 98;
        bodyBack.style.top = 0;
        bodyBack.style.left = 0;
        bodyBack.style.filter = "alpha(opacity=80)";
        bodyBack.style.opacity = 0.8;
        bodyBack.style.background = "#ddf";
        //实现弹出(插入到目标元素之后)
        var mybody = document.getElementById(objId);
        insertAfter(popupDiv,mybody);//执行函数insertAfter()
        insertAfter(bodyBack,mybody);//执行函数insertAfter()
    }
    //显示背景层
    document.getElementById("bodybg").style.display = "";
    //显示内容层
    var popObj=document.getElementById("popupAddr")
    popObj.innerHTML = document.getElementById(conId).innerHTML;
    popObj.style.display = "";
    //让弹出层在页面中垂直左右居中(个性)
    var arrayConSize=getConSize(conId,w,h)
    if(arrayPageSize[3] < arrayConSize[1])
      popObj.style.top = 0 + 'px';
    else
      popObj.style.top  = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2 + 'px';
    if(arrayPageSize[0] < arrayConSize[0])
        popObj.style.left = 0 + 'px';
    else
      popObj.style.left = (arrayPageSize[0] - arrayConSize[0]) / 2 + 'px';
}
//获取内容层内容原始尺寸
function getConSize(conId,w,h){
    var conObj=document.getElementById(conId)
    conObj.style.position = "absolute";
    conObj.style.left=-1000+"px";
    conObj.style.display="";
    conObj.style.width= w + "px";
    conObj.style.height= h + "px";
    var arrayConSize=[0,0];
    arrayConSize[0]=conObj.offsetWidth;
    arrayConSize[1]=conObj.offsetHeight;
    conObj.style.display="none";
    return arrayConSize;
}
//插入
function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }
    else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}
//关闭弹出层
function closeLayer(){
    document.getElementById("popupAddr").style.display = "none";
    document.getElementById("bodybg").style.display = "none";
    return false;
}
//拖拽
//对“拖动点”定义：onMousedown="StartDrag(event)"即可
var move=false,_X,_Y;
var isIE = document.all ? true : false;
function StartDrag(e){  //定义准备拖拽的函数  按下鼠标onMousedown
  var parentwin=document.getElementById("popupAddr");
  var d = document;
  var e = e ? e : event;
  if(isIE){parentwin.setCapture(); //对当前对象的鼠标动作进行跟踪
  }else{
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
  }
    move=true;
    //获取鼠标相对内容层坐标
    _X=parentwin.offsetLeft-e.clientX
    _Y=parentwin.offsetTop-e.clientY

    var arrayPageSize   = getPageSize();//调用getPageSize()函数
    var arrayPageScroll = getPageScroll();//调用getPageScroll()函数

    d.onmousemove = function(e){//定义拖拽函数  鼠标放上 拖动onMousemove
        var e = e ? e : Event;
        if(move){
            var parentwin=document.getElementById("popupAddr");
            var x = e.clientX+_X
            var y = e.clientY+_Y
            
            if (x<=0)
               x = 0
            if (y<=0)
               y = 0
            
            parentwin.style.left= (x)+ "px";;
            parentwin.style.top= (y)+ "px";;
        }
    }
    d.onmouseup = function (){//定义停止拖拽函数  松开鼠标 onMouseup
        //停止对当前对象的鼠标跟踪
        if(isIE){parentwin.releaseCapture();}
        else{window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);}  
        move=false;
    }

}

</script>
</head>
<body>

<input name="Input"  id="test3" value="弹出层" type="button" onclick="openLayer('test3','test','400','300')" />
<div id="test" style="display:none">
    <div id="contain" class="contain">
        <div id="dtit" class="dlgtit" onMousedown="StartDrag(event)">
            <div id="tl"></div>
            <div id="tc"><span>弹出普通带遮罩层的窗口-标题</span></div>
            <div id="tr"></div>
            <div id="xbtn" onclick="closeLayer();" onMouseover="this.style.backgroundPosition = '0 -19px';" onMouseout="this.style.backgroundPosition = '0 0';"></div>
        </div>
        <div id="dinner" class="dlginner"  style="height: 238px;">
            <div id="throbber" style="position:absolute;visibility:hidden;">正在加载窗口内容，请稍等....< /div>
        </div>
        <div id="dfoot" class="dlgfoot">
            <div id="bl"></div>
            <div id="bc"></div>
            <div id="br"></div>
            <div id="cbtn" onclick="closeLayer();" onMouseover="this.style.backgroundPosition = '0 -21px';" onMouseout="this.style.backgroundPosition = '0 0';"><span>取 消</span></div>
            <div id="obtn" onclick="alert('确定事件!');" onMouseover="this.style.backgroundPosition = '0 -21px';" onMouseout="this.style.backgroundPosition = '0 0';"><span>确 定</span></div>
        </div>
    </div>
</div>

</body>
</html>