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
Detailed explanation of CocosCreator message distribution mechanism
Overview This article begins to introduce content...
VMware ESXi installation and use record (with download)
Table of contents 1. Install ESXi 2. Set up ESXi ...
How to start multiple MySQL instances in CentOS 7.0 (mysql-5.7.21)
Configuration Instructions Linux system: CentOS-7...
MySQL max_allowed_packet setting
max_allowed_packet is a parameter in MySQL that i...
Integration practice of Vue+Element background management framework
Table of contents Vue+ElementUI background manage...
JavaScript custom calendar effect
This article shares the specific code of JavaScri...
How to implement Docker Registry to build a private image warehouse
The image of the microservice will be uploaded to...
How to deploy k8s in docker
K8s k8s is a cluster. There are multiple Namespac...
Vue implements paging function
This article example shares the specific code of ...
The whole process record of Vue export Excel function
Table of contents 1. Front-end leading process: 2...
MySQL derived table (Derived Table) simple usage example analysis
This article uses an example to describe the simp...
4 Practical Tips for Web Page Design
Related articles: 9 practical tips for creating we...
Summary of React's way of creating components
Table of contents 1. Create components using func...
How to start a Java program in docker
Create a simple Spring boot web project Use the i...
WeChat applet implements simple chat room
This article shares the specific code of the WeCh...