JS實(shí)現(xiàn)拖動(dòng)模態(tài)框案例

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

效果圖：

需求分析：

點(diǎn)擊登錄后登錄表單和遮罩層顯示，點(diǎn)擊關(guān)閉按鈕隱藏。輸入密碼時(shí)可以明文查看或者隱藏。在表單的頭部按下鼠標(biāo)后可以拖拽表單。鼠標(biāo)彈起拖拽結(jié)束。

話不多說，我們直接上代碼：

!DOCTYPEhtml

html

headlang="en"

metacharset="UTF-8"

title/title

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

/head

body

divaid="link"href="javascript:;"點(diǎn)擊，彈出登錄框/a/div

divid="login"

divid="title"登錄會(huì)員

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

/div

div

div

label用戶名：/label

inputtype="text"placeholder="請(qǐng)輸入用戶名"name="info[username]"id="username"

/div

div

label登錄密碼：/label

inputtype="password"placeholder="請(qǐng)輸入登錄密碼"name="info[password]"id="password"

/div

/div

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

/div

!--遮蓋層--

divid="bg"/div

script

//1.獲取元素

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

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

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

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

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

//2.點(diǎn)擊彈出層這個(gè)鏈接link

讓mask和login顯示出來

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

mask.style.display='block';

login.style.display='block';

})

//3.點(diǎn)擊closeBtn就隱藏mask和login

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

mask.style.display='none';

login.style.display='none';

})

//4.開始拖拽

//(1)當(dāng)我們鼠標(biāo)按下，就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo)

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

varx=e.pageX-login.offsetLeft;

vary=e.pageY-login.offsetTop;

//(2)鼠標(biāo)移動(dòng)的時(shí)候，把鼠標(biāo)在頁面中的坐標(biāo)，減去鼠標(biāo)在盒子內(nèi)的坐標(biāo)就是模態(tài)框的left和top值

document.addEventListener('mousemove',move)

functionmove(e){

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

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

}