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

在實現(xiàn)這個案例效果首先我們了解幾個屬性，offsetLeft.offsetTop,e.pageX,e.pageY;這幾個量都掌握以后就可以操作了

分別解釋一下：

1.offsetLeft：指的是返回一個帶有定位父元素左邊偏移量的值，當然如果需要操作的元素的父元素沒有定位，那么它返回的就是距離瀏覽器最左側(cè)頁面的距離。

2.offsetTop：指的是返回一個帶有定位父元素頂部偏移量的值，當然如果需要操作的元素的父元素沒有定位，那么它返回的就是距離瀏覽器最頂部頁面的距離。

3.e.pageX是指鼠標距離瀏覽器最左側(cè)的值。

4.e.pageY是指鼠標距離瀏覽器頂部的值。

tips:offsetLeft獲取的值是number類型，不帶像素值px，但是通過style.left獲取的值就帶px,做對比記憶?？谠E：如果想獲取元素的偏移量或者大小值那就用offset如果想給某元素設(shè)置值那么就用style，記得給設(shè)置的值后面加上+px

那么細說一下,offset與style的區(qū)別：

offset

offset可以得到任意樣式表中的樣式值，僅僅是個值，不含px單位offset系列獲得的數(shù)值是沒有單位的offsetWidth包含padding+border+widthoffsetWidth等屬性是只讀屬性，只能獲取不能賦值【重點】所以，我們想要獲取元素大小位置，用offset更合適

style

style只能得到行內(nèi)樣式表中的樣式值，此時是帶單位px的。style.width獲得的是帶有單位的字符串style.width獲得不包含padding和border的值style.width是可讀寫屬性，可以獲取也可以賦值【重點】所以，我們想要給元素更改值，則需要用style改變

以上我們掌握以后，那么我們愉快的動手實現(xiàn)需求吧

案例需求：

1.點擊彈出層，會彈出模態(tài)框，并且顯示灰色半透明的遮擋層。

2.點擊關(guān)閉按鈕，可以關(guān)閉模態(tài)框，并且同時關(guān)閉灰色半透明遮擋層。

3.鼠標放到模態(tài)框最上面一行，可以按住鼠標拖拽模態(tài)框在頁面中移動。

4.鼠標松開，可以停止拖動模態(tài)框移動

案例分析：

1.點擊彈出層，模態(tài)框和遮擋層就會顯示出來display:block;

2.點擊關(guān)閉按鈕，模態(tài)框和遮擋層就會隱藏起來display:none;

3.在頁面中拖拽的原理：鼠標按下并且移動，之后松開鼠標

4.觸發(fā)事件是鼠標按下mousedown，鼠標移動mousemove鼠標松開mouseup

5.拖拽過程:鼠標移動過程中，獲得最新的值賦值給模態(tài)框的left和top值，這樣模態(tài)框可以跟著鼠標走了

6.鼠標按下觸發(fā)的事件源是最上面一行，就是id為title

7.鼠標的坐標減去鼠標在盒子內(nèi)的坐標，才是模態(tài)框真正的位置。

8.鼠標按下，我們要得到鼠標在盒子的坐標。

9.鼠標移動，就讓模態(tài)框的坐標設(shè)置為：鼠標坐標減去盒子坐標即可，注意移動事件寫到按下事件里面。

10.鼠標松開，就停止拖拽，就是可以讓鼠標移動事件解除

代碼：

結(jié)構(gòu)代碼：

body

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

divid="login"

divid="title"登錄會員

spanaid="closeBtn"href="javascript:void(0);"關(guān)閉/a/span

/div

div

div

label用戶名：/label

inputtype="text"placeholder="請輸入用戶名"name="info[username]"id="username"

/div

div

label登錄密碼：/label

inputtype="password"placeholder="請輸入登錄密碼"name="info[password]"id="password"

/div

/div

divid="loginBtn"ahref="javascript:void(0);"id="login-button-submit"登錄會員/a/div

/div

!--遮蓋層--

divid="bg"/div

script

/script

/body

樣式代碼：

style

.login-header{

width:100%;

text-align:center;

height:30px;

font-size:24px;

line-height:30px;

}

ul,

li,

ol,

dl,

dt,

dd,

div,

p,

span,

h1,

h2,

h3,

h4,

h5,

h6,

a{

padding:0px;

margin:0px;

}

.login{

display:none;

width:512px;

height:280px;

position:fixed;

border:#ebebebsolid1px;

left:50%;

top:50%;

background:#ffffff;

box-shadow:0px0px20px#ddd;

z-index:9999;

transform:translate(-50%,-50%);

}

.login-title{

width:100%;

margin:10px0px0px0px;

text-align:center;

line-height:40px;

height:40px;

font-size:18px;

position:relative;

cursor:move;

}

.login-input-content{

margin-top:20px;

}

.login-button{

width:50%;

margin:30pxauto0pxauto;

line-height:40px;

font-size:14px;

border:#ebebeb1pxsolid;

text-align:center;

}

.login-bg{

display:none;

width:100%;

height:100%;

position:fixed;

top:0px;

left:0px;

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

}

a{

text-decoration:none;

color:#000000;

}

.login-buttona{

display:block;

}

.login-inputinput.list-input{

float:left;

line-height:35px;

height:35px;

width:350px;

border:#ebebeb1pxsolid;

text-indent:5px;

}

.login-input{

overflow:hidden;

margin:0px0px20px0px;

}

.login-inputlabel{

float:left;

width:90px;

padding-right:10px;

text-align:right;

line-height:35px;

height:35px;

font-size:14px;

}

.login-titlespan{

position:absolute;

font-size:12px;

right:-20px;

top:-30px;

background:#ffffff;

border:#ebebebsolid1px;

width:40px;

height:40px;

border-radius:20px;

}

/style

js代碼：

window.onload=function(){

//1.獲取元素

varlogin=document.querySelector('.login');

varmask=document.querySelector('.login-bg');

varlink=document.querySelector('#link');

varcloseBtn=document.querySelector('#closeBtn');

vartitle=document.querySelector('#title');

//2.點擊彈出層這個鏈接link

讓mask和login顯示出來

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

login.style.display='block';

mask.style.display='block';

})

//3.點擊closeBtn就隱藏mask和login

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

login.style.display='none';

mask.style.display='none';

});

//4.給標題添加一個鼠標按下的事件

title.addE