js实现拖动模态框

第js实现拖动模态框效果如下:

代码思路:

1．点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。

2．点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。

3．鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。

4．鼠标松开，可以停止拖动模态框移动。

5.在页面中拖拽的原理︰鼠标按下并且移动，之后松开鼠标

6.触发事件是鼠标按下mousedown，鼠标移动mousemove鼠标松开mouseup

7.拖拽过程:鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了

8.鼠标按下触发的事件源是最上面一行．就是id为title

9.鼠标的坐标减去鼠标在盒子内的坐标,才是模态框真正的位置。

10.鼠标按下，我们要得到鼠标在盒子的坐标。

11.鼠标移动，就让模态框的坐标设置为︰鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面。

代码步骤:

1.点击弹出层,模态框和遮挡层就会显示出来display:block

1.1点击弹出层这个链接link让mark和login显示出来

2.点击关闭按钮,模态框和遮挡层就会隐藏出来display:none

2.1点击弹出层这个关闭按钮closeBtn让mark和login隐藏起来

3.开始拖拽

1)当鼠标按下,就获得鼠标在盒子内的坐标

2)鼠标移动的时候，把鼠标在页面中的坐标减去鼠标在盒子中的坐标就是模态框的left和top值注意移动事件写到按下事件里面。

3)鼠标弹起,就让鼠标事件移除

具体每一步的步骤也会在代码中写出来

html部分:

div

ahref="javascript:;"id="link"

点击,弹出登录框

/a

/div

divid="login"

divid="title"登录会员

span

ahref="javascript:void(0);"id="closeBtn"

关闭

/a

/span

/div

div

div

label用户名:/label

inputtype="text"name="info[name]"id="username"placeholder="请输入用户名"/

/div

div

label登录密码/label

inputtype="password"name="info[password]"id="password"placeholder="请输入登录密码"/

/div

/div

divid="loginBtn"

ahref="javascript:void(0)"id="login-button-submit"/a

/div

/div

!--遮盖层--

divid="bg"

/div

css部分:

.login-headera{

position:fixed;

top:20px;

left:40%;

font-size:30px;

}

.login{

display:none;

width:512px;

height:280px;

position:fixed;

border:1pxsolid#EBEBEB;

left:50%;

top:50%;

background-color:#fff;

box-shadow:0020px#ddd;

z-index:999;

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

}

.login-title{

width:100%;

margin:10px000;

text-align:center;

line-height:40px;

height:40px;

position:relative;

cursor:move;

}

.login-input-content{

margin-top:20px;

}

.login-button{

width:50%;

margin:30pxauto0auto;

line-height:40px;

font-size:14px;

border:1pxsolid#EBEBEB;

text-align:center;

}

.login-bg{

display:none;

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

background:rgba(0,0,0,0.3);

}

a{

text-decoration:none;

color:#000000;

}

.login-buttona{

display:block;

}

.login-inputinput.listinput{

float:left;

line-height:35px;

width:350px;

border:1pxsolid#EBEBEB;

text-indent:5px;

}

.login-input{

overflow:hidden;

margin:0020px40px;

}

.login-inputlabel{

float:left;

width:90px;

padding-right:10px;

line-height:35px;

height:35px;

font-size:14px

}

.login-titlespan{

position:absolute;

font-size:12px;

right:-10px;

top:-30px;

background-color:#fff;

border:1pxsolid#ebebeb;

width:40px;

height:40px;

border-radius:20px;

}

javascript部分:

//1.获取元素

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

//遮盖层

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

//显示按钮

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

//关闭按钮

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

//在title区域按下鼠标才可以拖动

vartitle=document.querySelector('#title')

//2.点击弹出层这个链接link

让mark和login显示出来

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

mark.style.display='block'

login.style.display='block'

})

//3.点击弹出层这个关闭按钮closeBtn

让mark和login隐藏起来

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

mark.style.display='none'

login.style.display='none'

})

//4.开始拖拽

//(1)当鼠标按下,就获得鼠标在盒子内的坐标

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

varx=e.pageX-login.offsetLeft;

vary=e.pageY-login.offsetTop;

//(2)鼠标移动的时候，把鼠标在页面中的坐标减去鼠标在盒子中的坐标就是模态框的left和top值注意移动事件写到按下事件里面。

document.addEventListener('mousemove',move)

functionmove(e){

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