html 弹窗实现拖拽,javascript弹出拖动窗口

可以拖动的弹出窗口

#popDiv

{

position:absolute;

visibility:hidden;

overflow:hidden;

border:2px solid #AEBBCA;

background-color:#EEF1F8;

cursor:move;

padding:1px;

}

#popTitle

{

background:#9DACBF;

height:20px;

line-height:20px;

padding:1px;

}

#popForm

{

padding:2px;

}

.title_left

{

font-weight:bold;

padding-left:5px;

float:left;

}

.title_right

{

float:right;

}

#popTitle .title_right a

{

color:#000;

text-decoration:none;

}

#popTitle .title_right a:hover

{

text-decoration:underline;

color:#FF0000;

}

function showPopup() //弹出层

{

var objDiv=document.getElementById("popDiv");

objDiv.style.top="50px";//设置弹出层距离上边界的距离

objDiv.style.left="200px";//设置弹出层距离左边界的距离

objDiv.style.width="300px";//设置弹出层的宽度

objDiv.style.height="200px";//设置弹出层的高度

objDiv.style.visibility="visible";

}

function hidePopup()//关闭层

{

var objDiv=document.getElementById("popDiv");

objDiv.style.visibility="hidden";

}

修改操作

关闭

var objDiv=document.getElementById("popDiv");

var isIE=document.all?true:false;//判断浏览器类型

document.onmousedown = function(evnt)//当鼠标左键按下后执行此函数

{

var evnt=evnt?evnt:event;

if(evnt.button == (document.all ? 1 : 0))

{

mouseD = true;//mouseD为鼠标左键状态标志，为true时表示左键被按下

}

}

objDiv.onmousedown = function(evnt)

{

objDrag=this;//objDrag为拖动的对象

var evnt=evnt?evnt:event;

if(evnt.button == (document.all?1 : 0))

{

mx=evnt.clientX;

my=evnt.clientY;

objDiv.style.left=objDiv.offsetLeft+"px";

objDiv.style.top=objDiv.offsetTop+"px";

if(isIE)

{

objDiv.setCapture();

}

else

{

window.captureEvents(Event.MOUSEMOVE);

}

}

}

document.οnmοuseup=function()

{

mouseD=false;

objDrag="";

if(isIE)

{

objDiv.releaseCapture();

}

else

{

window.releaseEvents(objDiv.MOUSEMOVE);

}

}

document.οnmοusemοve=function(evnt)

{

var evnt=evnt?evnt:event;

if(mouseD==true&&objDrag)

{

var mrx=evnt.clientX-mx;

var mry=evnt.clientY-my;

objDiv.style.left = parseInt(objDiv.style.left) + mrx + "px";

objDiv.style.top = parseInt(objDiv.style.top) + mry + "px";

mx = evnt.clientX;

my = evnt.clientY;

}

}