JavaScript implements drag dialog effect

Code implementation:

Document
    
        * {
            margin: 0;
            top: 0;
        }
        
        .login-btn {
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            text-align: center;
            margin: 100px auto;
            background-color: #1E1E1E;
            color: white;
            border-radius: 50%;
        }
        
        .login-btn:hover {
            cursor: pointer;
            background-color: #323233;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
        }
        
        .bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .4);
        }
        
        .login {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 200px;
            background-color: #1E1E1E;
            box-shadow: 4px 4px 15px rgba(0, 0, 0, .3);
        }
        
        .hd {
            position: relative;
            width: 100%;
            height: 26px;
            background-color: #323233;
        }
        
        .hd:hover {
            cursor: move;
        }
        
        .close {
            position: absolute;
            top: 3px;
            right: 5px;
            width: 20px;
            height: 20px;
            background-color: red;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            box-shadow: 0 0 5px rgba(0, 0, 0, .7) inset;
        }
        
        .close:hover {
            background-color: yellow;
            cursor: pointer;
        }
    



    click
    
    
        
            ×
        
    
    
        //Get element
        var btn = document.querySelector('.login-btn');
        var bg = document.querySelector('.bg');
        var login = document.querySelector('.login');
        var close = document.querySelector('.close');
        var hd = document.querySelector('.hd');

        //Press BTN to pop up the dialog box
        btn.addEventListener('click', function() {
            bg.style.display = 'block';
            login.style.display = 'block';
        });

        //Press close to close the dialog box
        close.addEventListener('click', function() {
            bg.style.display = 'none';
            login.style.display = 'none';
        });

        hd.addEventListener('mousedown', function(e) {
            //Gets the distance from the mouse to the dialog box when the mouse is pressed at the top of the dialog box
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            //When the mouse is pressed and moved, the location of the dialog box is updated in real time
            document.addEventListener('mousemove', move);

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            //When the mouse is released, remove the drag action
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            });
        });

Implementation effect:

clickclickButton to pop up the dialog box.
Press and hold the top of the dialog box and move to achieve the drag effect.
Click the top right corner of the dialog box×, close the dialog box.