JavaScript realizes the drag effect of modal box
|
Here is a case of modal box dragging. The functions to be implemented here are: 1. Click the pop-up layer, a modal box will pop up and a gray translucent masking layer will be displayed. 2. Click the close button to close the modal box and the gray translucent mask layer at the same time. 3. Put the mouse on the top line of the modal box, and hold down the mouse to drag the modal box to move on the page. 4. Release the mouse to stop dragging the modal box. The implementation idea is: Click the pop-up layer, the modal box and the blocking layer will be displayed display:block; Click the close button, the modal box and the cover layer will be hidden display:none; The principle of dragging on the page: press the mouse and move it, then release the mouse. The triggering events are mousedown when the mouse is pressed, mousemove when the mouse is moved, and mouseup when the mouse is released. Drag process: When the mouse moves, get the latest value and assign it to the left and top values of the modal box, so that the modal box can follow the mouse. The event source triggered by mouse click is the top line, i.e. <div id="title" class="login-title">Login Member. The coordinates of the mouse minus the coordinates of the mouse in the box is the actual position of the modal box. The mouse is pressed, and we want to get the coordinates of the mouse in the box. Move the mouse and set the coordinates of the modal box to: mouse coordinates minus box coordinates. Note that the move event is written into the press event. When the mouse is released, the dragging stops, and the mouse movement event is released. The implementation code is:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
.login {
display: none;
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
transform: translate(-50%, -50%);
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="login-header"><a id="link" href="javascript:;" rel="external nofollow" >Click to pop up the login box</a></div>
<div id="login" class="login">
<div id="title" class="login-title">Login Member<span><a id="closeBtn" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="close-login">Close</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>Username:</label>
<input type="text" placeholder="Please enter your username" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>Login password:</label>
<input type="password" placeholder="Please enter your login password" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="login-button-submit">Login Member</a></div>
</div>
<!-- Covering layer -->
<div id="bg" class="login-bg"></div>
<script>
// 1. Get the element var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
// 2. Click the pop-up link link to display mask and login link.addEventListener('click', function() {
mask.style.display = 'block';
login.style.display = 'block';
})
// 3. Click closeBtn to hide mask and login
closeBtn.addEventListener('click', function() {
mask.style.display = 'none';
login.style.display = 'none';
})
// 4. Start dragging // (1) Press the mouse to get the coordinates of the mouse in the box title.addEventListener('mousedown', function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// (2) When the mouse moves, the coordinates of the mouse on the page minus the coordinates of the mouse in the box are the left and top values of the modal box document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// (3) When the mouse pops up, remove the mouse move event document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
</script>
</body>
</html>
The effect is:
This is the end of this article about how to use JavaScript to implement the modal drag effect. For more information about JavaScript modal drag, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
>>: Pure CSS free implementation code for websites to have dark mode switching function
Recommend
Defining the minimum height of the inline element span
The span tag is often used when making HTML web p...
Do you know why vue data is a function?
Official website explanation: When a component is...
Example code for building an admin dashboard layout using CSS and JavaScript
What you will create In this new tutorial, we'...
Tomcat components illustrate the architectural evolution of a web server
1. Who is tomcat? 2. What can tomcat do? Tomcat i...
Demonstration of building ElasticSearch middleware and common interfaces under centos7 in Linux system
1. Introduction to Middleware 1. Basic concepts E...
About the pitfall record of Vue3 transition animation
Table of contents background Problem location Fur...
The pitfall record of case when judging NULL value in MySQL
Table of contents Preface Mysql case when syntax:...
MySQL Query Cache and Buffer Pool
1. Caches - Query Cache The following figure is p...
How to use the Clipboard API in JS
Table of contents 1. Document.execCommand() metho...
Two ways to specify the character set of the html page
1. Two ways to specify the character set of the h...
Detailed explanation of the difference between "/" and "~" in Linux
"/" is the root directory, and "~&...
A few front-end practice summaries of Alipay's new homepage
Of course, it also includes some personal experien...
Introducing icons by implementing custom components based on Vue
Preface In project development, there are many wa...
The combination and difference between ENTRYPOINT and CMD in dockerfile
In the previous article [Detailed explanation of ...
Complete steps for Docker to pull images
1. Docker pull pulls the image When using $ docke...