js彈出層居中可移動

《js彈出層居中可移動》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、js彈出層居中可移動

2、rds"CONTENT="">{padding:0px;margin:0px;}#Idiv{width:300px;height:100px;position:absolute;z-index:1000;border:2pxsolid#ffffff;background:#ffffff;}functionshow(){varIdiv=document.getE

3、lementById("Idiv");Idiv.style.display="block";//以下部分要將彈出層居中顯示Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px";Idiv.style.top=(document.documentElement.clientHeight-Idiv.clientHeight)/2+document.documentElem

4、ent.scrollTop-50+"px";//此處出現(xiàn)問題，彈出層左右居中，但是高度卻不居中，顯示在上部分，導(dǎo)致一//部分不可見,于是暫時在下面添加margin-top//以下部分使整個頁面至灰不可點(diǎn)擊varprocbg=document.createElement("div");//首先創(chuàng)建一個divprocbg.setAttribute("id","mybg");//定義該div的idprocbg.style.background="#000000";procbg.style.width="100%";procbg.style.he

5、ight="100%";procbg.style.position="fixed";procbg.style.top="0";procbg.style.left="0";procbg.style.zIndex="500";procbg.style.opacity="0.6";procbg.style.filter="Alpha(opacity=70)";//以上部分也可以用csstext代替//procbg.style.cssText="background:#000000;width:100%;height:100%;position:

6、fixed;top:0;left:0;zIndex:500;opacity:0.6;filter:Alpha(opacity=70);";//背景層加入頁面document.body.appendChild(procbg);document.body.style.overflow="hidden";//取消滾動條//以下部分實現(xiàn)彈出層的拖拽效果varposX;varposY;Idiv.onmousedown=function(e){if(!e)e=window.event;//IEposX=e.clientX-parseInt(Idiv.

7、style.left);posY=e.clientY-parseInt(Idiv.style.top);document.onmousemove=mousemove;}document.onmouseup=function(){document.onmousemove=null;}functionmousemove(ev){if(ev==null)ev=window.event;//IEIdiv.style.left=(ev.clientX-posX)+"px";Idiv.style.top=(ev.clientY-posY)+"px";

8、}}functioncloseDiv()//關(guān)閉彈出層{varIdiv=document.getElementById("Idiv");Idiv.style.display="none";do