JavaScript implements drag dialog effect

Time:2020-12-5

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.

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]