console
var h1_in = document.querySelector('h1');
var box = document.querySelector('.box');
var close = document.querySelector('.close');
var in_Vip = document.querySelector('.inVip')
h1_in.addEventListener('click',function(){
box.style.display = 'block';
close.style.display = 'block';
})
close.addEventListener('click',function(){
box.style.display = 'none';
this.style.display = 'none';
})
in_Vip.addEventListener('mousedown',function(e){
var x = e.pageX-box.offsetLeft;
var y = e.pageY-box.offsetLeft;
document.addEventListener('mousemove',move)
function move(e){
box.style.left = e.pageX - x + 'px';
box.style.top = e.pageY - y + 'px';
}
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move)
})
})
<h1>
点击登录
</h1>
<div class="box">
<p class="inVip">登录会员</p>
<form action="">
<table>
<tr>
<td>用户名:</td>
<td>
<input type="text" placeholder="请输入用户名">
</td>
</tr>
<tr>
<td>登录密码:</td>
<td>
<input type="password" placeholder="请输入登录密码"">
</td>
</tr>
</table>
</form>
<butto>登录会员</button>
<div class="close">关闭</div>
</div>
h1{
width: 100%;
text-align: center;
}
.box{
display: none;
background-color: white;
width: 500px;
height: 200px;
position: relative;
margin: auto;
}
.box p{
font-size: 20px;
font-weight: bold;
text-align: center;
padding-top: 10px;
}
table{
text-align: right;
}
input{
width: 360px;
height: 30px;
}
button{
width: 200px;
height: 40px;
background-color: white;
border: 1px solid rgb(204, 195, 195);
margin-left: 140px;
margin-top: 10px;
}
.close{
border-radius: 40px 40px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
position: absolute;
top: -20px;
left: 480px;
background-color: white;
}