js弹出层

js弹出层 文章目录如下 Html 打开 Js var ti = null; var t2 = null; var div1 = null; //遮罩层ID var div2 = null; //内容层ID var div2Width = 0; //内容层宽度 var div2Height = 0; //内容层高度 var isHiddenScroll = false; //是否隐藏滚动条 function $(id) { return document.getElementById(id); } function loading(div1Id, div2Id, divWidth, divHeight){ div1 = div1Id; div2 = div2Id; div2Width = divWidth; div2Height = divHeight; var tmd = 0; var x1 = document.documentElement.clientWidth; var y1 = document.body.offsetHeight; var y2=document.documentElement.clientHeight;//整个页面的高度 with($(div1)){ style.width=x1+"px"; if(y2>y1){ style.height=y2+"px"; }else{ style.height=y1+"px"; } style.overflowX="hidden"; style.overflowY="hidden"; style.display="block"; } $(div1).style.left=0; $(div1).style.filter='Alpha(Opacity=0)'; if(isHiddenScroll){ document.body.style.overflowX="hidden"; document.body.style.overflowY="hidden"; } $(div2).style.top=parseInt((document.documentElement.clientHeight-250)/2)+"px"; $(div2).style.left=(Math.abs(x1-divWidth))/2 + "px"; $(div2).style.display="block"; ti = setInterval("hei()",10); } var x = 0; function hei(){ if(div1 == null) return ; x+=10; if(x<31){ if(document.all){ $(div1).style.filter='Alpha(Opacity='+x+')'; }else{ $(div1).style.opacity=""+x/100+""; } } } function unload(){ if(div1 != null){ $(div1).style.display="none"; $(div2).style.display="none"; document.body.style.overflowX="auto"; document.body.style.overflowY="auto"; clearInterval(ti); //clearTimeout(t2); x=0; } } function move(move_id){ var moveObj = $(move_id); var e=window.event || arguments.callee.caller.arguments[0]; var deltaX=parseInt(e.clientX-moveObj.offsetLeft); var deltaY=parseInt(e.clientY-moveObj.offsetTop); var deltaH=document.documentElement.clientHeight; var deltaW=document.documentElement.clientWidth; //alert(e.clientX); drag=true; moveObj.onmousemove=function(ev){ ev=ev?ev:window.event; if(drag){ var Y=ev.clientY-deltaY; var X=ev.clientX-deltaX; var H=deltaH-moveObj.offsetHeight; var W=deltaW-moveObj.offsetWidth; //alert(moveObj.offsetWidth); if( Y > 0 || X > 0 ){ if(Y>=H){ moveObj.style.top=H+"px"; } else { moveObj.style.top=Y+"px"; } if (X>=W) { moveObj.style.left=W+"px"; } else { moveObj.style.left=X+"px"; } } if (Y <= 0) { //if(document.documentElement.scrollTop > 0) // moveObj.style.top = document.documentElement.scrollTop; //else moveObj.style.top=0; } if (X <= 0) { //if(document.documentElement.scrollLeft > 0) // moveObj.style.left = document.documentElement.scrollLeft; //else moveObj.style.left=0; } moveObj.setCapture(); } } moveObj.onmouseup=function(){ drag=false; moveObj.releaseCapture(); } } window.onresize = function() { if(div1 != null) { $(div1).style.width = document.documentElement.clientWidth + "px"; $(div2).style.top = (document.documentElement.clientHeight-$("div2").offsetHeight)/2 + "px"; $(div2).style.left = (document.documentElement.clientWidth-$("div2").offsetWidth)/2 + "px"; ti = setInterval("hei()",10); } } Css .tab{ clear:both; padding:0; margin:0; list-style:none; } li{ float:left; display: block; margin:0; } #tl{ background-image: url(../image/tl.png); } #tb{ background-image: url(../image/b.png); } #tr{ background-image: url(../image/tr.png); } #mlr{ background-image: url(../image/b.png); } #bl{ background-image: url(../image/bl.png); } #bb{ background-image: url(../image/b.png); } #br{ background-image: url(../image/br.png); } #div1{ position:absolute; display: none; margin: 0 0; filter:alpha(opacity=70); background-color:#a6a6a6; z-index:9; } #div2{ position:absolute; display: none; text-align:center; z-index:1001; } #top{ background-color:#eef7fe; height:25px; text-align:right; } #close{ padding-right: 20px; cursor: pointer; } Image b.png bl.png br.png closelabel.gif tl.png tr.png