JavaScript implements draggable modal box

This article shares the specific code of JavaScript to implement a draggable modal box for your reference. The specific content is as follows

Code:

HTML code part:

<style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
            cursor: pointer;
        }
        .login {
            display: none;
            width: 500px;
            height: 280px;
            position: fixed;
            border: 1px #ebebeb solid;
            left: 50%;
            top: 50%;
            background: #fff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 999;
            transform: translate(-50%,-50%);
        }
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 10px;
            position: relative;
            cursor: move;
        }
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background-color: #fff;
            border: 1px #ebebeb solid;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
        .login-input-content {
            margin-top: 20px;
        }
        .login-button {
            width: 100px;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: 1px #ebebeb solid;
            text-align: center;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        .login-button a {
            display: block;
        }
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: 1px #ebebeb solid;
            text-indent: 5px;
        }
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            height: 35px;
            line-height: 35px;
            text-align: right;
            font-size: 14px;
        }
        .login-mask {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
    <div class="login-header">Click to pop up the login box</div>
    <div id="login" class="login">
        <div id="title" class="login-title">Login Member<span><a id="closeBtn" class="close-login" href="javascript:void(0);" >Close</a></span></div>
        <div class="login-input-content">
            <div class="login-input">
                <label>Username:</label>
                <input type="text" placeholder="Please enter your username" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>Login Password:</label>
                <input type="password" placeholder="Please enter your login password" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a id="login-button-submit" href="javascript:void(0);" >Login Member</a></div>
    </div>
    <!-- Mask layer-->
<div id="mask" class="login-mask"></div>

JS part:

<script>
        // 1. Get the element var login = document.querySelector('.login');
        var mask = document.querySelector('.login-mask');
        var loginHeader = document.querySelector('.login-header');
        var closeBtn = document.querySelector('.close-login');
        var loginTitle = document.querySelector('.login-title');
 
        // 2. Click the login prompt to display login and mask;
        loginHeader.addEventListener('click', function() {
            login.style.display = 'block';
            mask.style.display = 'block';
        })
        // 3. Click the close button to hide login and mask;
        closeBtn.addEventListener('click', function() {
            login.style.display = 'none';
            mask.style.display = 'none';
        })
        // 4. Drag the login box // 4.1 Press the mouse to get the coordinates of the mouse in the box loginTitle.addEventListener('mousedown', function(e) {
            var x = e.pageX-login.offsetLeft;
            var y = e.pageY-login.offsetTop;
            // 4.2 When the mouse moves, subtract the coordinates of the mouse in the box from the coordinates of the mouse in the page to get the left and top values of the login box document.addEventListener('mousemove', move)
            function move(event) {
                login.style.left = event.pageX - x + 'px';
                login.style.top = event.pageY - y + 'px';
            }
            // 4.3 When the mouse is released, remove the move event document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move)
            })
        })
</script>

Effect demonstration:

Ideas:

Add a click event to the draggable part. When triggered, calculate the coordinates of the mouse in the draggable part (e.pageX - box.offsetLeft), get xy, and then add a mouse move event to the document, because when the mouse drags the modal box, it moves within the entire DOM window. Keep the relative position of the mouse and the modal box unchanged, so you need to calculate the position of the modal box at this time (e.pageX - x), and then modify the position of the modal box. When the mouse pops up, just clear the move event.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

An example of elegant writing of judgment in JavaScript
56 practical JavaScript tool functions to help you improve development efficiency
JavaScript to implement drop-down list selection box
JavaScript to achieve simple provincial and municipal linkage
js tag syntax usage details

<<: harborRestart operation after modifying the configuration file

>>: MySQL decimal unsigned update negative numbers converted to 0