位置：首页-资讯-前端开发

js实现模态框拖拽

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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

效果展示和需求分析

效果展示

需求分析

点击登录后登录表单和遮罩层显示，点击关闭按钮隐藏。
输入密码时可以明文查看或者隐藏。
在表单的头部按下鼠标后可以拖拽表单。
鼠标弹起拖拽结束。

代码分析

HTML 代码

<body>
    <a href="javascript:;" class="login">登录我的账号</a>
    <form action="">
        <h4>账号登录</h4>
        <div class="login-items">
            <label for="uname">用户名：</label >
            <input type="text" placeholder="请输入用户名" id="uname">
            </div>
        <div class="login-items">
            <label for="psw">登录密码：</label>
            <input type="password" name="" id="psw" placeholder="请输入您的密码">
            <span class="close" id="eye-state"></span>
        </div>
        <a href="javascript:;" class="login-btn">登录账号</a >
        <a href="javascript:;" class="close-btn">关闭</a >
    </form>
    <div id="bg" class="login-bg"></div>
</body>
<script class="lazy" data-src="js/模态框.js"></script>

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();
    }
    
    // 1、实现小眼睛改变密码输入状态
    function setEye() {
           if (!eyeFlag) {
            eyeState.className = 'open';
            pswInput.type = 'text';
            eyeFlag = 1;
        } else {
            eyeState.className = 'close';
            pswInput.type = 'password';
            eyeFlag = 0;
        }
    }
    
    // 2、外面登录按钮实现表单、遮罩层的显示和它自己隐藏
    function goLogin() {
        loginBg.style.visibility = 'visible';
        loginForm.style.display = 'block';
        this.style.display = 'none';
    }
    
    // 3、关闭按钮实现表单、遮罩层的隐藏和外面登录按钮的显示
    function leaveLogin() {
        loginBg.style.visibility = 'hidden';
        loginForm.style.display = 'none';
        login.style.display = 'block';
    }
    
    // 4、实现表单拖拽效果
    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';
    }
}

分析