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

How to use skeleton screen in vue project

Nowadays, application development is basically se...

Linux automatically deletes logs and example commands from n days ago

1. Delete file command: find the corresponding di...

Explanation of installation and configuration of building go environment under linux

It is very simple to build a go environment under...

Reasons and optimization solutions for slow MySQL limit paging with large offsets

In MySQL, we usually use limit to complete the pa...

Detailed discussion of the character order of mysql order by in (recommended)

//MySQL statement SELECT * FROM `MyTable` WHERE `...

Vue monitoring properties and calculated properties

Table of contents 1. watch monitoring properties ...

How to use CocosCreator for sound processing in game development

Table of contents 1. Basics of audio playback in ...

XHTML Getting Started Tutorial: What is XHTML?

What is HTML? To put it simply: HTML is used to m...

Vue3 uses axios interceptor to print front-end logs

Table of contents 1. Introduction 2. Use axios in...

vue-table implements adding and deleting

This article example shares the specific code for...

Example of deploying MySQL on Docker

Table of contents 1 What is container cloud? 2 In...

10 Popular Windows Apps That Are Also Available on Linux

According to data analysis company Net Market Sha...

A brief discussion on whether MySQL can have a function similar to Oracle's nvl

Use ifnull instead of isnull isnull is used to de...

Native js to achieve puzzle effect

This article shares the specific code of native j...

Solution to MySQL garbled code problem under Linux

The project interacts with the server, accesses t...