第JS實現(xiàn)簡單拖動模態(tài)框案例本文實例為大家分享了JS實現(xiàn)簡單拖動模態(tài)框的具體代碼，供大家參考，具體內(nèi)容如下

需要實現(xiàn)的效果：

①點擊點擊，彈出登錄框后模態(tài)框和遮擋層就會顯示出來

②點擊關(guān)閉按鈕，模態(tài)框和遮蓋層就會隱藏起來

③頁面拖拽

功能分析：

首先給上面的點擊，彈出登錄框設(shè)置點擊事件，點擊之后就顯示遮罩層和模態(tài)框，然后給模態(tài)框上面的關(guān)閉按鈕設(shè)置點擊事件，點擊之后就隱藏遮罩層和模態(tài)框。然后是拖拽過程，這個過程的實現(xiàn)較為復(fù)雜，主要分為下面幾步：

1.明確模態(tài)框的真正位置是鼠標(biāo)的坐標(biāo)減去鼠標(biāo)在模態(tài)框內(nèi)的坐標(biāo)。

2.鼠標(biāo)的坐標(biāo)通過鼠標(biāo)按下事件獲取，通過e.pageY和e.pageX來獲取。

3.按下之后想要獲得鼠標(biāo)在模態(tài)框中的坐標(biāo)（一直都不會變），需要獲得盒子的坐標(biāo)，盒子坐標(biāo)通過element.offsetTop和element.offsetLeft來獲取，通過鼠標(biāo)的坐標(biāo)減去模態(tài)框的坐標(biāo)獲得鼠標(biāo)在模態(tài)框中的坐標(biāo)。

4.按下之后鼠標(biāo)移動，就讓模態(tài)框的坐標(biāo)設(shè)置稱為鼠標(biāo)的坐標(biāo)減去鼠標(biāo)在模態(tài)框中的坐標(biāo)。

5.鼠標(biāo)松開之后需要停止拖拽，就是移除鼠標(biāo)移動事件。

完整代碼：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

title拖動模態(tài)框/title

script

window.onload=function(){

varloginbox=document.querySelector('.loginbox');

vargray=document.querySelector('.gray');

varloginheader=document.querySelector('.login-header');

varclose=document.querySelector('.close');

varmove=document.querySelector('.move');

loginheader.addEventListener('click',function(){

loginbox.style.display='block';

gray.style.display='block';

});

close.addEventListener('click',function(){

loginbox.style.display='none';

gray.style.display='none';

});

move.addEventListener('mousedown',function(e){

//鼠標(biāo)在盒子內(nèi)得距離

varx=e.pageX-loginbox.offsetLeft;

vary=e.pageY-loginbox.offsetTop;

//alert('hahah')

document.addEventListener('mousemove',move)

functionmove(e){

loginbox.style.left=e.pageX-x+'px';

loginbox.style.top=e.pageY-y+'px';

}

//鼠標(biāo)談起就移除鼠標(biāo)移動事件

document.addEventListener('mouseup',function(){

document.removeEventListener('mousemove',move)

})

})

}

/script

style

.login-header{

width:100%;

text-align:center;

height:30px;

font-size:24px;

line-height:30px;

}

.move{

cursor:move;

}

ul,

li,

ol,

dl,

dt,

dd,

div,

p,

span,

h1,

h2,

h3,

h4,

h5,

h6,

a{

padding:0px;

margin:0px;

}

a{

text-decoration:none;

color:#000000;

}

.loginbox{

display:none;

position:absolute;

top:200px;

left:50%;

transform:translateX(-50%);

z-index:2;

width:520px;

height:300px;

background-color:#fff;

}

.loginbox.close{

cursor:pointer;

}

.loginboxp{

float:left;

font-size:22px;

text-align:center;

margin-top:30px;

margin-left:240px;

}

.loginbox.content{

float:right;

margin-top:30px;

margin-right:70px;

}

.loginbox.contentinput{

width:300px;

height:25px;

outline:none;

border:1pxsolid#ccc;

}

.loginbox.btn{

background-color:#fff;

width:180px;

height:30px;

border:1pxsolid#ccc;

margin-top:40px;

margin-left:170px;

}

.loginboxspan{

position:absolute;

font-size:12px;

text-align:center;

line-height:50px;

z-index:9999;

top:-25px;

right:-25px;

width:50px;

height:50px;

background-color:#fff;

color:#000000;

border-radius:50%;

box-shadow:1px1px5pxrgba(0,0,0,.3);

}

.gray{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background-color:rgba(0,0,0,.3);

}

/style

/head

body

divaid="link"href="javascript:;"點擊，彈出登錄框/a/div

div

p登錄會員/p

div

labelfor=""用戶名：/label

inputtype="text"placeholder="請輸入用戶名"

/div

div