javascript实现移动的模态框效果

本文实例为大家分享了javascript实现移动的模态框效果的具体代码，供大家参考，具体内容如下

页面效果：

点击链接后，弹出登录模态框，点击关闭链接可以关闭模态框，鼠标在模态框标题区域按下后可以拖拽模态框，松开鼠标后，模态框停止移动

实现思路：

1、html、css搭建好页面，设置好模态框内容和样式后，将模态框隐藏：display: none;如果点击弹出模态框后，页面背景色发生改变，可以添加一个遮罩层，将遮罩层也先隐藏

2、给点击后弹出模态框的元素添加点击事件- - -onclick

事件处理程序中设置- - -模态框 和 遮罩层 显示- - -eg:

login.style.display = ‘block';
loginBg.style.display = ‘block';

3、给关闭模态框元素添加点击事件- - -onclick

事件处理程序中设置- - -模态框 和 遮罩层 隐藏- - -eg:

login.style.display = ‘none';
loginBg.style.display = ‘none';

4、给模态框标题部分添加鼠标按下事件- - -mousedown
获取鼠标在模态框中的位置

5、鼠标按下事件中再添加鼠标移动事件- - -mousemove

document.addEventListener(‘mousemove', move);

获取鼠标在页面中的位置
鼠标的位置值 - 鼠标在模态框中的位置值 = 模态框在页面中的位置值
将计算得出的位置值赋值给模态框的top、left，就可以达到拖拽鼠标的效果，跟随鼠标移动

6、当鼠标松开后，模态框要停止移动。鼠标按下事件中再添加鼠标松开事件- - -mouseup
鼠标松开事件处理程序：页面移除鼠标移动事件- - -document.removeEventListener(‘mousemove', move);

注意：要添加移除事件，所以给鼠标移动函数单独拿出来，写一个函数名，添加和移除事件时引用函数名就可以了

代码示例：

    
    
    
    
    



    
点击，弹出登录框
    

        

            登录会员
            关闭
        
        

            

                用户名：
                

            
            

                登录密码：
                

            
        
        
登录会员
    

    
    

    

页面效果：

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