preface

A modal box is a child window that is overlaid on the parent window , But in HTML In web pages , There is no concept of parent window and child window . Here, a hidden mask layer and a hidden box are used to achieve the effect of modal box .

Effect demonstration :

Let's start with a detailed description of how to implement a drag and drop modal box . Only for JS Partial explanation ,HTML and CSS Will be placed in the source code at the bottom of the article !

JavaScript Explain in detail

The overall effect is composed of the following events :

*
Click the login now button , Pop up mask layer and modal box .

*
Click the small cross to close the modal box and mask layer .

*
When the mouse is pressed over the title of the modal box , Calculate the coordinates of the mouse in the modal box .

*
To the whole HTML Document add mouse movement event , The modal box follows the mouse movement through algorithm .

*
Mouse in HTML When loosening in a document , remove HTML Mouse movement events for documents .

First, get the elements we need to operate on
let but = document.querySelector('.but') // Login now button let shade =
document.querySelector('.shade')  // mask let loginBox =
document.querySelector('.login-box') // Modal box let title =
document.querySelector('.title') // Modal box title : User login let exit =
document.querySelector('.exit'); // Small cross
Click the login now button , Pop up mask layer and modal box .
but.addEventListener('click', function() {    shade.style.display = "block";
// Show mask layer    loginBox.style.display = "block";  // Show modal box });
Click the small cross to close the modal box and mask layer .
exit.addEventListener('click', function() {    shade.style.display = "none";
 // Hide mask layer    loginBox.style.display = "none";  // Hide mask layer });
Calculate the coordinates of the mouse in the modal box when the mouse is pressed on the modal box title :
title.addEventListener('mousedown', function(event) {    let x = event.pageX -
loginBox.offsetLeft;    let y = event.pageY - loginBox.offsetTop; });
event.pageX and event.pageY: Get the mouse in the entire page x coordinate ,y coordinate .

loginBox.offsetLeft and loginBox.offsetTop: Get the distance from the modal box to the left and top of the page .

Calculate the coordinates of the mouse in the modal box by subtraction .

After the mouse is pressed on the modal box title , Give it again document Object add mouse movement event :
title.addEventListener('mousedown', function(event) {    let x = event.pageX -
loginBox.offsetLeft;    let y = event.pageY - loginBox.offsetTop;  
 document.addEventListener('mousemove', function() {        //
Subtract the coordinates of the mouse in the modal box from the new coordinates after the mouse is moved , Implement the mode box to move with the mouse        loginBox.style.left = (event.pageX -
x)+"px";        loginBox.style.top = (event.pageY - y)+"px";   }); });
Why not give the mouse movement event to title ?

If the mouse movement event is given to title If , Mouse moves too fast , Will leave the modal box , Causes the modal box to not follow .

If you want to see the effect , Here document change into title, Then drag quickly , No demo here !

So far, the modal box has been moved with the mouse , But when we release the mouse , It is found that the modal box still follows the mouse . therefore , You still need to document Add mouse release event .
title.addEventListener('mousedown', function(event) {    let x = event.pageX -
loginBox.offsetLeft;    let y = event.pageY - loginBox.offsetTop;  
 document.addEventListener('mousemove', loginBoxMove);    //
Here, you need to write the mouse movement event function outside , Because it is also used when removing event listeners !    function loginBoxMove(event) {      
 loginBox.style.left = (event.pageX - x)+"px";        loginBox.style.top =
(event.pageY - y)+"px";   }    document.addEventListener('mouseup', function()
{        document.removeEventListener('mousemove', loginBoxMove);   }) });
Why not release the mouse event here title ?

Or will you encounter the similar situation mentioned above , You can try it yourself !

source code
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title> Modal box </title> <style> * {
margin: 0; padding: 0; box-sizing: border-box; letter-spacing: 3px; } body {
background-color: #ffbf84; } /* The log in now button and modal box are horizontally and vertically centered */ .but, .login-box {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*
mask */ .shade { display: none; position: absolute; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, .3); /* Here, you must move the mask layer to the upper layer of the overlapping elements , Can cause the effect that the parent window cannot be operated */
z-index: 1; } /* Login now button */ .but { cursor: pointer; display: block; width:
200px; height: 60px; border-radius: 30px; box-shadow: 0 10px 10px rgba(10, 20,
20, .2); background-color: #fa8282; color: #fff; font-size: 25px; text-align:
center; line-height: 60px; } .but:hover { transition: background-color 0.5s;
background-color: #f36886; } /* Modal box */ .login-box { display: none; width:
350px; height: 250px; border: 1px solid rgb(216, 216, 216); border-radius:
10px; box-shadow: 5px 5px 10px rgba(10, 20, 20, .2), -5px -5px 10px rgba(10,
20, 20, .2); background-color: #fff; /* Same as mask layer , The modal box must be on the top layer */ z-index: 1; }
.login-box .title { cursor: move; user-select: none; /* Prevent users from selecting text */ position:
relative; width: 100%; height: 70px; color: #3f3f3f; font-size: 20px;
font-weight: 700; text-align: center; line-height: 70px; } .login-box .title
.exit { position: absolute; top: -10px; right: 10px; font-size: 30px; }
.login-box .title .exit:hover { cursor: pointer; text-shadow: 2px 2px 4px
rgba(10, 20, 20, .5); } .login-box form { display: flex; flex-direction:
column; justify-content: center; align-items: center; padding: 10px 0; }
.login-box form .input-box { width: 60%; height: 35px; margin-bottom: 20px;
padding: 0px 10px; border: 1px solid #3f3f3f; border-radius: 8px; color:
#3f3f3f; font-size: 16px; font-weight: 700; } .login-box form .input-box:focus
{ outline: none; } .login-box form .login-but { width: 120px; height: 35px;
border: none; background-color: #fa8282; border-radius: 8px; color: #fff;
font-size: 20px; font-weight: 700; } .login-box form .login-but:hover {
background-color: #f36886; } </style> </head> <body> <!-- mask --> <div
class="shade"></div> <!-- Login button --> <span class="but"> Log in now </span> <!-- Modal box -->
<div class="login-box"> <div class="title"> User login <span class="exit">×</span>
</div> <form action=""> <input type="text" class="input-box" placeholder=" user name ">
<input type="password" class="input-box" placeholder=" password "> <input type="submit"
class="login-but" value=" Sign in "> </form> </div> <script> let but =
document.querySelector('.but'); let shade = document.querySelector('.shade');
let loginBox = document.querySelector('.login-box'); let title =
document.querySelector('.title'); let exit = document.querySelector('.exit');
// Login now button click event but.addEventListener('click', function() { shade.style.display =
"block"; loginBox.style.display = "block"; }); // Close modal box event
exit.addEventListener('click', function() { shade.style.display = "none";
loginBox.style.display = "none"; }); // Drag the title area to move the modal box
title.addEventListener('mousedown', function(event) { // Calculate the coordinates of the mouse in the login box let x =
event.pageX - loginBox.offsetLeft; let y = event.pageY - loginBox.offsetTop; //
Add a mouse movement event to a page document.addEventListener('mousemove', loginBoxMove); function
loginBoxMove(event) { loginBox.style.left = (event.pageX - x)+"px";
loginBox.style.top = (event.pageY - y)+"px"; } // Remove the mouse movement event of the page after releasing the mouse
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', loginBoxMove); }) }); </script>
</body> </html>

Technology
©2019-2020 Toolsou All rights reserved,
Solve in servlet The Chinese output in is a question mark C String function and character function in language MySQL management 35 A small coup optimization Java performance —— Concise article Seven sorting algorithms (java code ) use Ansible Batch deployment SSH Password free login to remote host according to excel generate create Build table SQL sentence Spring Source code series ( sixteen )Spring merge BeanDefinition Principle of Virtual machine installation Linux course What are the common exception classes ?