关闭弹框事件_简单的弹出框拖拽关闭事件

弹出框拖拽关闭事件

*{

margin:0;padding:0;

}

#box{

width:500px;

height:250px;

background:#f2f2f2;

border:1px #ccc solid;

border-radius:3px;

position:absolute;

left:calc(50% - 250px);

top:calc(50% - 150px);

}

.boxHeader{

height:45px;

line-height:45px;

border-bottom:1px #ccc solid;

}

.title{

padding:0 15px;

color:#333;

float:left;

}

.close{

padding:0 15px;

color:#ccc;

font-size:20px;

float:right;

cursor: pointer;

}

.boxCont{

padding:25px 15px;

font-size:14px;

color:#666;

text-align:center;

}

标题内容

×

我是内容我是内容我是内容我是内容我是内容

var Close=document.getElementById('close');

Close.οnclick=function(){

box.style.display='none';

};

box.οnmοusedοwn=function(e){

var ev= e||event;

var l=ev.clientX-box.offsetLeft;

var t=ev.clientY-box.offsetTop;

document.οnmοusemοve=function(e){

var ev = e||event;

var needLeft=ev.clientX-l;

var needTop=ev.clientY-t;

//不超出左边边框

needLeft<0?needLeft=0:needLeft;

//不超出上边边框

needTop<0?needTop=0:needTop;

//不超出右边边框

var maxLeft=innerWidth-box.offsetWidth;

needLeft>maxLeft?needLeft=maxLeft:needLeft;

//不超出底部边框

var maxTop=innerHeight-box.offsetHeight;

needTop>maxTop?needTop=maxTop:needTop;

box.style.left=needLeft+'px';

box.style.top=needTop+'px';

};

document.οnmοuseup=function(){

document.οnmοusemοve=document.οnmοuseup=null;

};

}