JS实现简单拖动模态框案例_javascript技巧_

本文实例为大家分享了JS实现简单拖动模态框的具体代码，供大家参考，具体内容如下

需要实现的效果：

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

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

③页面拖拽

功能分析：

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

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

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

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

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

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

完整代码：

                                         
点击，弹出登录框
     
         
登录会员
         
             用户名：                      
         
             登录密码：                      
                  关闭     
     
       
   

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！