2022-03-26 原生js实现一个点击弹出的可拖拽登录框

原创已于 2022-12-18 17:25:52 修改 · 387 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #拖拽 #client #offset #html

于 2022-03-26 22:30:31 首次发布

知识点同时被 2 个专栏收录

97 篇文章

订阅专栏

项目与应用

67 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现一个点击弹出的登录框，并且该登录框具有拖拽功能。文章详细讲解了实现思路、完整代码、实际效果以及涉及到的关键知识点，包括z-index的运用、css3的filter属性和元素拖拽的核心代码。

文章目录

1.要求和思路

点击弹出+拖拽+点击关闭

2.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }    
        a {
            text-decoration: none;
            color: #000000;
        }
        
        /* 1.点击前的文字和样式 */  
        .login-header {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 30px;
        }
        
        /* 2.点击弹出的登录框 */
        /* 登录框外部样式 */ 
        .login {
            width: 512px;
            height: 280px;
            border: 1px solid #ebebeb;
            box-shadow: 0px 0px 20px #ddd;
            background: #ffffff;
            position: absolute;
            left: 500px;
            top: 140px;
            /* 放在遮罩层之上 */
            z-index: 9999;
            display: none;
        }
        /* 登录框标题和关闭按钮 */      
        .login-title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-top: 10px;
            position: relative;
            cursor: move;
            /* 火狐 */
            -moz-user-select: none;
            /* webkit */
            -webkit-user-select: none;
            /* IE10 */
            -ms-user-select: none;
            /* 早期浏览器 */
            -khtml-user-select: none;
            /* 通用 */
            user-select: none;
        }
        /* 用户名和密码*/
        /* 整体 */      
        .login-input-content {
            margin-top: 20px;
            /* 火狐 */
            -moz-user-select: none;
            /* webkit */
            -webkit-user-select: none;
            /* IE10 */
            -ms-user-select: none;
            /* 早期浏览器 */
            -khtml-user-select: none;
            /* 通用 */
            user-select: none;
        }
        /* 用户名和密码的wrap */        
        .login-input {
            overflow: hidden;
            margin-bottom: 20px;
        }    
        .login-input label {
            width: 90px;
            height: 35px;
            float: left;
            line-height: 35px;
            text-align: center;
            padding-right: 10px;
            font-size: 14px;
        }
        
        .login-title span {
            width: 40px;
            height: 40px;
            background: #ffffff;
            border: 1px solid #ebebeb;
            border-radius: 50%;
            font-size: 12px;
            position: absolute;
            right: -20px;
            top: -30px;
        }
        /* 两个input:text的样式 */      
        .login-input .list-input {
            width: 350px;
            height: 35px;
            border: 1px solid #ebebeb;
            float: left;
            text-indent: 5px;
        }
        /* 点击登录按钮 */   
        #loginBtn {
            width: 50%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            border: 1px solid #ebebeb;
            margin: 30px auto 0px auto;
            /* 火狐 */
            -moz-user-select: none;
            /* webkit */
            -webkit-user-select: none;
            /* IE10 */
            -ms-user-select: none;
            /* 早期浏览器 */
            -khtml-user-select: none;
            /* 通用 */
            user-select: none;
        }
        
        /* 3.遮罩层 */        
        .login-bg {
            width: 100%;
            height: 100%;
            background: #000000;
            position: fixed;
            left: 0px;
            top: 0px;
            opacity: .3;
            -moz-opacity: .3;
            -khtml-opacity: .3;
            filter: alpha(opacity=30);
            display: none;
        }
    </style>
</head>

<body>
    <!-- 1.点击前的文字和样式 -->
    <div class="login-header">
        <a id="link" href="javascript:;">点击,弹出登录框</a>
    </div>
    <!-- 2.点击弹出的登录框 -->
    <div id="login" class="login">
        <!-- 登录框标题和关闭按钮 -->
        <div id="title" class="login-title">登录会员<span><a href="javascript:void(0)" id="closeBtn" class="close-login">关闭</a></span></div>
        <!-- 输入用户名和密码 -->
        <div class="login-input-content">
            <div class="login-input">
                <label for="">用户名:</label>
                <input type="text" placeholder="请输入用户名" class="list-input">
            </div>
            <div class="login-input">
                <label for="">登录密码:</label>
                <input type="text" placeholder="请输入登录密码" class="list-input">
            </div>
        </div>
        <!-- 登录按钮 -->
        <div id="loginBtn">
            <a href="javascript:void(0);" id="login-button-submit">登录会员</a>
        </div>
    </div>
    <!-- 3.遮罩层 -->
    <div id="bg" class="login-bg"></div>
</body>
<script>
    var link = document.getElementById("link"); //点击弹出的a标签
    var bg = document.getElementById("bg"); //遮盖层
    var login = document.getElementById("login"); //弹出的登录框
    var title = document.getElementById("title"); //登录框的标题
    var closeBtn = document.getElementById("closeBtn"); //点击关闭

    // 功能一:点击弹出登录框
    link.onclick = function() {
        login.style.display = "block";
        bg.style.display = "block";
    };
    // 功能二:点击关闭按钮,关闭弹出框
    closeBtn.onclick = function() {
        login.style.display = "none";
        bg.style.display = "none";
    };
    // 功能三:登录框的拖拽
    // title绑定鼠标按下事件
    title.onmousedown = function(eveDown) {
            // document绑定鼠标移动事件
            document.onmousemove = function(eveMove) {
                var l = eveMove.clientX - eveDown.offsetX;
                var t = eveMove.clientY - eveDown.offsetY;
                var maxL = window.innerWidth - login.offsetWidth - 21;
                var maxT = window.innerHeight - login.offsetHeight;
                if (l < 0) l = 0;
                if (t < 21) t = 21;
                if (l > maxL) l = maxL;
                if (t > maxT) t = maxT;
                login.style.left = l + "px";
                login.style.top = t + "px";
            }
        }
        // document绑定鼠标抬起事件
    document.onmouseup = function() {
        document.onmousemove = null;
    }
</script>

</html>

3.效果

在这里插入图片描述

4.知识点

z-index:当前css盒子放在其他盒子之上或之下
css3的filter用法
元素的拖拽核心代码:left值=eveDown.clientX-eveMove.offsetX(减去div的资深宽高可以让鼠标保持在元素正中间显示)
-cursor的属性值:pointer（小手）、auto（I）、default（箭头）、crosshair（十字交叉）、move（移动）、wait（转圈）、help（？）