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
How to install Nginx in CentOS
Official documentation: https://nginx.org/en/linu...
JavaScript code to implement a simple calculator
This article example shares the specific code of ...
Install JDK8 in rpm mode on CentOS7
After CentOS 7 is successfully installed, OpenJDK...
Implementation of CSS scroll bar style settings
webkit scrollbar style reset 1. The scrollbar con...
Detailed explanation of MySQL DEFINER usage
Table of contents Preface: 1.Brief introduction t...
Analyze Tomcat architecture principles to architecture design
Table of contents 1. Learning Objectives 1.1. Mas...
Detailed tutorial on installing nvidia driver + CUDA + cuDNN in Ubuntu 16.04
Preparation 1. Check whether the GPU supports CUD...
CentOS 7.2 builds nginx web server to deploy uniapp project
Panther started as a rookie, and I am still a roo...
Sample code for flask and vue front-end and back-end separation project deployment
I developed a project some time ago. I used the f...
Detailed explanation of HTML area tag
The <area> tag defines an area in an image ...
A brief description of the relationship between k8s and Docker
Recently, the project uses kubernetes (hereinafte...
Docker implements MariaDB sub-library and sub-table and read-write separation functions
Table of contents 1. Introduction 2. Environmenta...
Professional and non-professional web design
First of all, the formation of web page style main...
Detailed explanation of the differences between SQL joint query inner join, outer join and cross join
When developing applications that use a database,...
Solve the error "Can't locate ExtUtils/MakeMaker.pm in @INC"
When installing mha4mysql, the steps are roughly:...