JS实现简单拖动模态框案例

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

需要实现的效果：

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

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

③页面拖拽

功能分析：

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

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

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

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

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

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

完整代码：

 

    
    
    
    
    
    

 

    
点击，弹出登录框
    

        
登录会员
        

            用户名：
            
        
        

            登录密码：
            
        
        
        关闭
    
    

 
    

 

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