js实现模态框拖拽-白红宇

js实现模态框拖拽

阅读量：126 次

发布时间：2019-02-27

本文共 2013 字，大约阅读时间需要 6 分钟。

效果展示和需求分析

效果展示展示了一个完整的登录模态框界面，其中包括登录表单、背景遮罩和关闭按钮。模态框支持以下功能：

点击登录按钮后，登录表单和遮罩层会同时显示

点击关闭按钮后，表单和遮罩层会隐藏

密码输入时支持明文查看或隐藏

表单标题可以通过拖拽移动

鼠标弹起后拖拽结束

需求分析系统需求如下：

登录后显示登录表单和遮罩层

支持明文和隐藏密码显示切换

允许用户拖拽表单标题区域

拖拽结束后自动调整表单位置

代码分析 HTML代码

JS代码

var eyeState = document.querySelector('#eye-state');
var pswInput = document.querySelector('#psw');
var login = document.querySelector('.login');
var loginBg = document.querySelector('#bg');
var loginForm = document.querySelector('form');
var closeBtn = document.querySelector('.close-btn');
var eyeFlag = 0;
eyeState.onclick = setEye;
login.onclick = goLogin;
closeBtn.onclick = leaveLogin;
loginForm.children[0].addEventListener('mousedown', dragForm);
loginForm.onselectstart = function(e) {
    e.preventDefault();
};
function setEye() {
    if (!eyeFlag) {
        eyeState.className = 'open';
        pswInput.type = 'text';
        eyeFlag = 1;
    } else {
        eyeState.className = 'close';
        pswInput.type = 'password';
        eyeFlag = 0;
    }
}
function goLogin() {
    loginBg.style.visibility = 'visible';
    loginForm.style.display = 'block';
    login.style.display = 'none';
}
function leaveLogin() {
    loginBg.style.visibility = 'hidden';
    loginForm.style.display = 'none';
    login.style.display = 'block';
}
function dragForm(e) {
    var x = e.pageX - this.parentNode.offsetLeft;
    var y = e.pageY - this.parentNode.offsetTop;
    document.addEventListener('mousemove', move);
    this.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove', move);
    });
    function move(event) {
        loginForm.style.left = event.pageX - x + 'px';
        loginForm.style.top = event.pageY - y + 'px';
    }
}