JavaScript implements draggable modal box
|
This article shares the specific code of JavaScript to implement a draggable modal box for your reference. The specific content is as follows Code:HTML code part:
<style>
* {
margin: 0px;
padding: 0px;
}
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
cursor: pointer;
}
.login {
display: none;
width: 500px;
height: 280px;
position: fixed;
border: 1px #ebebeb solid;
left: 50%;
top: 50%;
background: #fff;
box-shadow: 0px 0px 20px #ddd;
z-index: 999;
transform: translate(-50%,-50%);
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 10px;
position: relative;
cursor: move;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background-color: #fff;
border: 1px #ebebeb solid;
width: 40px;
height: 40px;
border-radius: 20px;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 100px;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: 1px #ebebeb solid;
text-align: center;
}
a {
text-decoration: none;
color: #000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: 1px #ebebeb solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
height: 35px;
line-height: 35px;
text-align: right;
font-size: 14px;
}
.login-mask {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div class="login-header">Click to pop up the login box</div>
<div id="login" class="login">
<div id="title" class="login-title">Login Member<span><a id="closeBtn" class="close-login" href="javascript:void(0);" >Close</a></span></div>
<div class="login-input-content">
<div class="login-input">
<label>Username:</label>
<input type="text" placeholder="Please enter your username" id="username" class="list-input">
</div>
<div class="login-input">
<label>Login Password:</label>
<input type="password" placeholder="Please enter your login password" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a id="login-button-submit" href="javascript:void(0);" >Login Member</a></div>
</div>
<!-- Mask layer-->
<div id="mask" class="login-mask"></div>JS part:
<script>
// 1. Get the element var login = document.querySelector('.login');
var mask = document.querySelector('.login-mask');
var loginHeader = document.querySelector('.login-header');
var closeBtn = document.querySelector('.close-login');
var loginTitle = document.querySelector('.login-title');
// 2. Click the login prompt to display login and mask;
loginHeader.addEventListener('click', function() {
login.style.display = 'block';
mask.style.display = 'block';
})
// 3. Click the close button to hide login and mask;
closeBtn.addEventListener('click', function() {
login.style.display = 'none';
mask.style.display = 'none';
})
// 4. Drag the login box // 4.1 Press the mouse to get the coordinates of the mouse in the box loginTitle.addEventListener('mousedown', function(e) {
var x = e.pageX-login.offsetLeft;
var y = e.pageY-login.offsetTop;
// 4.2 When the mouse moves, subtract the coordinates of the mouse in the box from the coordinates of the mouse in the page to get the left and top values of the login box document.addEventListener('mousemove', move)
function move(event) {
login.style.left = event.pageX - x + 'px';
login.style.top = event.pageY - y + 'px';
}
// 4.3 When the mouse is released, remove the move event document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move)
})
})
</script>Effect demonstration:
Ideas: Add a click event to the draggable part. When triggered, calculate the coordinates of the mouse in the draggable part (e.pageX - box.offsetLeft), get xy, and then add a mouse move event to the document, because when the mouse drags the modal box, it moves within the entire DOM window. Keep the relative position of the mouse and the modal box unchanged, so you need to calculate the position of the modal box at this time (e.pageX - x), and then modify the position of the modal box. When the mouse pops up, just clear the move event. 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:
|
<<: harborRestart operation after modifying the configuration file
>>: MySQL decimal unsigned update negative numbers converted to 0
Recommend
Docker builds Redis5.0 and mounts data
Table of contents 1. Simple mounting of persisten...
Docker image access to local elasticsearch port operation
Using the image service deployed by docker stack,...
MySQL database master-slave configuration tutorial under Windows
The detailed process of configuring the MySQL dat...
Detailed steps to install 64-bit Ubuntu system and Docker tool on Raspberry Pi 3B+
If you want to install some 64-bit applications (...
Detailed explanation of the persistence implementation principle of transactions in MySQL
Preface When it comes to database transactions, a...
Introduction to Apache deployment of https in cryptography
Table of contents Purpose Experimental environmen...
Detailed explanation of real-time backup knowledge points of MySQL database
Preface The need for real-time database backup is...
Detailed explanation of the lock structure in MySQL
Mysql supports 3 types of lock structures Table-l...
Summary of Common Letters in Unicode
Most of the earliest computers could only use ASC...
Pure CSS drop-down menu
Achieve results Implementation Code html <div ...
Detailed explanation of server-id example in MySQL master-slave synchronization
Preface When we build a MySQL cluster, we natural...
W3C Tutorial (3): W3C HTML Activities
HTML is a hybrid language used for publishing on ...
Simple tutorial on using Navicat For MySQL
recommend: Navicat for MySQL 15 Registration and ...
Analysis of MySQL latency issues and data flushing strategy process
Table of contents 1. MySQL replication process 2....
Mysql command line mode access operation mysql database operation
Usage Environment In cmd mode, enter mysql --vers...