div层实现IE Firefox 页面半透明遮罩效果弹窗
<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 + 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 < arrayConSize) popObj.style.top = 0 + 'px'; else popObj.style.top= arrayPageScroll + (arrayPageSize - arrayConSize) / 2 + 'px'; if(arrayPageSize < arrayConSize) popObj.style.left = 0 + 'px'; else popObj.style.left = (arrayPageSize - arrayConSize) / 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=; arrayConSize=conObj.offsetWidth; arrayConSize=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){//定义准备拖拽的函数按下鼠标onMousedownvar 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"/><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" 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" onMouseout="this.style.backgroundPosition = '0 0';"><span>取 消</span></div> <div id="obtn" onMouseout="this.style.backgroundPosition = '0 0';"><span>确 定</span></div> </div> </div></div></body></html>
页:
[1]