JavaScript realizes the effect of mobile modal box

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

Recommend

MySQL's method of dealing with duplicate data (preventing and deleting)

Some MySQL tables may contain duplicate records. ...

Vue implements two-way data binding

This article example shares the specific code of ...

About the location of the H1 tag in XHTML

There has been a lot of discussion about H1 recent...

How to use CSS to center a box horizontally and vertically (8 methods)

Original code: center.html : <!DOCTYPE html>...

Detailed explanation of configuring Docker's yum source and installing it in CentOS7

CentOS7 is used here, and the kernel version is [...

N ways to center elements with CSS

Table of contents Preface Centering inline elemen...

Detailed explanation of how to upgrade software package versions under Linux

In the Linux environment, you want to check wheth...

Detailed explanation of the default values ​​of width and height in CSS: auto and %

in conclusion % of width: defines the percentage ...

Native js to achieve simple carousel effect

This article shares the specific code of js to ac...

Summary of CSS sibling element floating analysis

float:left/right/none; 1. Same level floating (1)...

Solve the mysql user deletion bug

When the author was using MySQL to add a user, he...

JS implementation of Apple calculator

This article example shares the specific code of ...

Summary of solving the yum error problem after upgrading Python to 3.6.6 on CentOS 7

I recently upgraded a test server operating syste...

Web Design Principles of Hyperlinks

<br />Related articles: 9 practical tips for...

Detailed explanation of HTML page header code example

Knowledge point 1: Set the base URL of the web pa...