Native js implements draggable login box effect
- 2021-07-13 03:58:34
- OfStack
Implementation principle
1. When the onmousemove event is triggered, the pageXY of the mouse is continuously updated to change the position.
Offset of login box = current mouse position-distance from mouse to login box border
2. When onmousedown mouse is pressed, it triggers an event to obtain the distance from the mouse to the login box, and then sets true to allow dragging
3. onmouseup mouse pop-up setting false stop dragging
4. Display formula in the center of login box: (width and height of visible area-width and height of login box)/2
5. When the browser window size changes, trigger the event window. onresize and update the login box to be displayed in the center
There are detailed comments in the code
Complete code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
/*p{font-size: 100px;}*/
#btn{width: 80px;
height: 40px;
background: #3b7ae3;
margin:0 auto;
display: block;
cursor: pointer;
border-style: none;
color: #fff;
font-size: 16px;}
#mask{
background: #000;
opacity: 0.75;
filter: alpha(opacity=75);
height: 1000px;
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1000;
}
#login{position: absolute; top: 100px; left: 100px; width: 400px; height: auto; border:1px solid #d5d5d5; z-index: 1001; }
.title{position: relative;background-color: #f7f7f7; cursor: move; height: 50px; line-height: 50px; font-size: 16px; color: #333; padding-left:30px;}
.close{position: absolute; top:0; right: 10px; color: #ccc;}
.content{background: #fff; padding: 15px 20px;}
.user{margin-bottom: 15px;}
.password{margin-bottom: 15px;}
.pt{display: block;
height: 38px;
padding-left: 15px;
border: 1px solid #ddd;
transition: .3s;
font-size: 14px;
color: #666;
width: 343px;
}
.sm{display: block;
height: 48px;
border: 1px solid #ddd;
transition: .3s;
font-size: 16px;
color: #666;
width: 360px;
background: #3b7ae3;
color: #fff;}
</style>
</head>
<body>
<!-- <div id="mask"></div> -->
<button id="btn" href=""> Login </button>
<!-- <div class="login" id="login">
<div class="title" id="title"> Log in to Baidu account <a href="#" class="close">x</a></div>
<div class="content">
<div class="user"><input class="pt" type="input" value=" Mobile phone / Mailbox / User name "></div>
<div class="password"><input class="pt" type="input" value=" Password "></div>
<div class="submit"><input class="sm" type="submit" value=" Login "></div>
</div>
</div> -->
<script type="text/javascript">
function b(){
// Create a mask layer div And insert body
var mask=document.createElement("div");
mask.id="mask";
mask.style.height=cheight+"px";
// Width is directly used 100% In the style
document.body.appendChild(mask);
// Create a login layer div And insert body
var login=document.createElement("div");
login.id="login";
login.innerHTML='<div class="title" id="title"> Log in to Baidu account '+'<a href="#" class="close">x</a>'+'</div>'+
'<div class="content">'+'<div class="user">'+'<input class="pt" type="input" value=" Mobile phone / Mailbox / User name ">'+'</div>'+'<div class="password">'+'<input class="pt" type="input" value=" Password ">'+'</div>'+'<div class="submit">'+'<input class="sm" type="submit" value=" Login ">'+'</div>'+'</div>';
document.body.appendChild(login);
// Width of visible area of window
var cwidth= document.documentElement.clientWidth || document.body.clientWidth;
// Height of visible area of window
var cheight= document.documentElement.clientHeight || document.body.clientHeight;
// Login box width
var lwidth=login.offsetWidth;
// Login box height
var lheight=login.offsetHeight;
// Set the center display of the login box
login.style.left=(cwidth-lwidth)/2+"px";
login.style.top=(cheight-lheight)/2+"px";
// Set the height of the mask layer
mask.style.height=cheight+"px";
// Still center the window after changing its size
window.onresize=function(){
if(document.compatMode=="CSS1Compat"){
cwidth=document.documentElement.clientWidth;
cheight=document.documentElement.clientHeight;
}else{
cwidth=document.body.clientWidth;
cheight=document.body.clientHeight;
}
login.style.left=(cwidth-lwidth)/2+"px";
login.style.top=(cheight-lheight)/2+"px";
mask.style.height=cheight+"px";
}
// Get Drag Container
var title=document.getElementById("title");
var isDraging=false;
var mouseOffsetX;
var mouseOffsetY;
// Mouse press event
title.onmousedown=function(e){
var e=e||window.event;
/*var el=e.srcElement;
if(!el){
el=e.target;// Compatible with Firefox
}*/
// Position of mouse relative to login box
mouseOffsetX=e.pageX-login.offsetLeft;
mouseOffsetY=e.pageY-login.offsetTop;
// When the mouse is pressed; true
isDraging=true;
/*console.log(mouseOffsetY, mouseOffsetX)*/
}
// Mouse movement event
document.onmousemove=function(e){
var e=e||window.event;
// Coordinates when the mouse moves
var newMX=e.pageX;
var newMY=e.pageY;
// Judge as true You can drag and drop when
if(isDraging===true){
// Offset value of login box = Current position - Distance from mouse to login box
var loginL=newMX-mouseOffsetX;
var loginT=newMY-mouseOffsetY;
// If left top When the value exceeds the edge, make it equal to the edge
if(loginL<0){
loginL=0;
}else if(loginL>(cwidth-lwidth)){
loginL=cwidth-lwidth;
}
if(loginT<0){
loginT=0;
}else if(loginT>(cheight-lheight)){
loginT=cheight-lheight;
}
login.style.left=loginL+"px";
login.style.top=loginT+"px";
}
}
// Set the mouse to non-drag when it bounces up
document.onmouseup=function(){
isDraging=false;
}
// Click X Close the login box and pop-up layer
var close=login.getElementsByClassName("close")[0];
close.onclick=function(){
document.body.removeChild(mask);
document.body.removeChild(login);
}
}
// Click Login to pop up the login box and pop-up layer
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
b();
}
}
</script>
</body>
</html>