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
What is the difference between HTM and HTML? What is the difference between HTM and HTML?
In the process of learning web design, I did not ...
MySQL table deletion operation implementation (differences between delete, truncate, and drop)
This article mainly discusses the differences bet...
How to use JavaScript to get the most repeated characters in a string
Table of contents topic analyze Objects of use So...
Sample code for implementing PC resolution adaptation in Vue
Table of contents plan Install Dependencies Intro...
IE8 browser will be fully compatible with Web page standards
<br />According to foreign media reports, in...
Five ways to traverse JavaScript arrays
Table of contents 1. for loop: basic and simple 2...
Docker image optimization (from 1.16GB to 22.4MB)
Table of contents The first step of optimization:...
Detailed explanation of CocosCreator optimization DrawCall
Table of contents Preface What is DrawCall How do...
Vue implements verification code countdown button
This article example shares the specific code of ...
Detailed explanation of using the at command for one-time scheduled tasks in Linux
Table of contents Preface 1. Introduction to one-...
A brief discussion on HTML ordered lists, unordered lists and definition lists
Ordered List XML/HTML CodeCopy content to clipboa...
Detailed tutorial on downloading mysql on Windows 10
MySQL versions are divided into Enterprise Editio...
Example of how to implement value transfer between WeChat mini program pages
Passing values between mini program pages Good ...
In-depth analysis of MySQL from deleting the database to running away_Advanced (I) - Data Integrity
1. Introduction to Data Integrity 1. Introduction...
Detailed explanation of setting Context Path in Web application
URL: http://hostname.com/contextPath/servletPath/...