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
MySQL high concurrency method to generate unique order number
Preface After this blog post was published, some ...
Vue sample code for easily implementing virtual scrolling
Table of contents Preface Rolling principle accom...
HTML insert image example (html add image)
Inserting images into HTML requires HTML tags to ...
Linux kernel device driver Linux kernel basic notes summary
1. Linux kernel driver module mechanism Static lo...
How to configure Http, Https, WS, and WSS in Nginx
Written in front In today's Internet field, N...
Detailed explanation of JavaScript implementation of hash table
Table of contents 1. Hash table principle 2. The ...
3 common errors in reading MySQL Binlog logs
1. mysqlbinlog: [ERROR] unknown variable 'def...
MySQL5.7 single instance self-starting service configuration process
1.MySQL version [root@clq system]# mysql -v Welco...
Use trigger method to realize pop-up file selection dialog box without clicking file type input
You can use the trigger method. There is no native...
Detailed explanation of how to easily switch CSS themes
I recently added a very simple color scheme (them...
MySQL query syntax summary
Preface: This article mainly introduces the query...
MySQL export of entire or single table data
Export a single table mysqldump -u user -p dbname...
Teach you how to create a project using vue-cli3 in five minutes (beginner's guide)
Table of contents 1. Build the Vue environment 2....
Ubuntu builds Mysql+Keepalived high availability implementation (dual-active hot standby)
Mysql5.5 dual machine hot standby Implementation ...
Solve the problem that vue project cannot carry cookies when started locally
Solve the problem that the vue project can be pac...