JS基础-拖动模态框案例

需要实现的效果:

①点击“点击,弹出登录框”后模态框和遮挡层就会显示出来

JS基础-拖动模态框案例_第1张图片

②点击关闭按钮,模态框和遮盖层就会隐藏起来

JS基础-拖动模态框案例_第2张图片

③页面拖拽

JS基础-拖动模态框案例_第3张图片

功能分析:

首先给上面的"点击,弹出登录框"设置点击事件,点击之后就显示遮罩层和模态框,然后给模态框上面的关闭按钮设置点击事件,点击之后就隐藏遮罩层和模态框。然后是拖拽过程,这个过程的实现较为复杂,主要分为下面几步:

1.明确模态框的真正位置是鼠标的坐标减去鼠标在模态框内的坐标。

2.鼠标的坐标通过鼠标按下事件获取,通过e.pageY和e.pageX来获取。

3.按下之后想要获得鼠标在模态框中的坐标(一直都不会变),需要获得盒子的坐标,盒子坐标通过element.offsetTop和element.offsetLeft来获取,通过鼠标的坐标减去模态框的坐标获得鼠标在模态框中的坐标。

4.按下之后鼠标移动,就让模态框的坐标设置称为鼠标的坐标减去鼠标在模态框中的坐标。

5.鼠标松开之后需要停止拖拽,就是移除鼠标移动事件。

完整代码:





    
    
    
    拖动模态框
    
    



    
    

登录会员

关闭

你可能感兴趣的:(javascript,开发语言)