JavaScript realizes the effect of mobile modal box

This article example shares the specific code of JavaScript to achieve the mobile modal box effect for your reference. The specific content is as follows

Page effect:

After clicking the link, a login modal box pops up. Click the close link to close the modal box. Press the mouse in the title area of the modal box to drag the modal box. After releasing the mouse, the modal box stops moving.

Implementation ideas:

1. After building the page with html and css and setting the content and style of the modal box, hide the modal box: display: none; if the background color of the page changes after clicking the pop-up modal box, you can add a mask layer and hide the mask layer first

2. Add a click event to the element that pops up the modal box after clicking - - -onclick

Set up the modal box and mask layer display in the event handler - eg:

login.style.display = 'block';
loginBg.style.display = 'block';

3. Add a click event to close the modal box element - onclick

Set in the event handler - - - modal box and mask layer hidden - - -eg:

login.style.display = 'none';
loginBg.style.display = 'none';

4. Add a mouse down event to the modal box title - - -mousedown
Get the mouse position in the modal box

5. Add a mouse move event to the mouse press event - - -mousemove

document.addEventListener('mousemove', move);

Get the position of the mouse in the page. The position value of the mouse in the modal box = the position value of the modal box in the page. Assign the calculated position value to the top and left of the modal box to achieve the effect of dragging the mouse and follow the mouse movement.

6. When the mouse is released, the modal box should stop moving. Add a mouse release event to the mouse press event - - -mouseup
Mouse release event handler: Page removes mouse move event - - -document.removeEventListener('mousemove', move);

Note: To add and remove events, separate the mouse movement function, write a function name, and reference the function name when adding and removing events.

Code example:

<!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>Drag modal box</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
            color: #000;
        }
        
        .login-header {
            margin: 100px auto;
            height: 30px;
            line-height: 30px;
            font-size: 24px;
            text-align: center;
        }
        
        .login {
            display: none;
            width: 515px;
            height: 282px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #ebebeb;
            background-color: #fff;
            box-shadow: 0px 0px 20px #ddd;
            text-align: center;
            z-index: 99999;
        }
        
        .login-title {
            position: relative;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            cursor: move;
        }
        
        .close {
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
            width: 36px;
            height: 36px;
            line-height: 36px;
            font-size: 12px;
            border-radius: 18px;
            border: 1px solid #ddd;
            color: #666;
            background-color: #fff;
        }
        
        .login-input-content {
            margin: 10px 0;
        }
        
        .login-input label {
            display: inline-block;
            width: 80px;
            text-align: right;
        }
        
        .login-input input {
            width: 300px;
            height: 40px;
            margin: 10px 0;
            padding-left: 10px;
            border: 1px solid #ddd;
            outline-color: royalblue;
        }
        
        .loginBtn a {
            display: block;
            width: 180px;
            height: 35px;
            line-height: 35px;
            margin: 10px auto;
            border: 1px solid #ddd;
        }
        
        .login-bg {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div class="login-header"><a id="link" href="javascript:;" >Click to pop up the login box</a></div>
    <div class="login">
        <div class="login-title">
            Login Member<span><a class="close" href="javascript:void(0);" >Close</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label for="username">Username:</label>
                <input type="text" name="info[username]" id="username" placeholder="Please enter your username"><br>
            </div>
            <div class="login-input">
                <label for="password">Login password:</label>
                <input type="password" name="info[password]" id="password" placeholder="Please enter your login password"><br>
            </div>
        </div>
        <div type="submit" value="Login Member" class="loginBtn"><a href="javascript:void(0);" >Login Member</a></div>
    </div>

    <!-- Covering layer -->
    <div class="login-bg"></div>
    <script>
        var link = document.querySelector('#link');
        var login = document.querySelector('.login');
        var loginBg = document.querySelector('.login-bg');
        var close = document.querySelector('.close');
        var loginTitle = document.querySelector('.login-title');
        link.addEventListener('click', function() {
            login.style.display = 'block';
            loginBg.style.display = 'block';
        })

        close.addEventListener('click', function() {
            login.style.display = 'none';
            loginBg.style.display = 'none';
        })

        loginTitle.addEventListener('mousedown', function(e) {
            // Calculate the position of the mouse in the modal box when the mouse is pressed var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;

            // Assign position to the moving modal box function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }

            // Add mouse events. When the mouse is pressed, the modal box moves with the mouse document.addEventListener('mousemove', move);

            // When the mouse is released, the modal box stops moving document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })

        })
    </script>
</body>

</html>

Page effect:

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:

js to implement a simple modal box example
Detailed explanation of the use of AngularJS modal box template ngDialog
Simple modal box example implemented in native js
Sample code for developing Vue.js pop-up modal component
Example of using ngModal modal box in AngularJS
angularJS modal box $modal example code
JS realizes the modal box effect after clicking the picture
Bootstrap Validator modal box, jsp, form validation Ajax submission function
AngularJs pop-up modal box (model)
js uses the event to prevent bubbling to hide the blank modal box when clicking on it

<<: Docker image management common operation code examples

>>: Mysql implements three functions for field splicing