实现网页登入窗口的显示隐藏
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background-color: #f2f1f2;
}
header {
width: 1200px;
height: 50px;
background-color: #fff;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
header div:nth-of-type(2) {
display: flex;
gap: 20px;
cursor: pointer;
}
header div:nth-of-type(2) span:hover {
font-weight: bolder;
color: red;
}
.login-box {
display: none;
overflow: hidden;
width: 300px;
height: 200px;
background-color: #fff;
border: solid 1px orangered;
border-radius: 8px;
box-shadow: rgba(255, 0, 0, 0.5) 5px 5px 5px;
position: absolute;
left: 1150px;
top: 50px;
}
.login-box .header {
height: 40px;
background-color: orangered;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
cursor: pointer;
padding: 0 10px;}
欢迎访问NDBNDB
登录
注册
会员登录
[关闭]
let _login = document.getElementById("login");
let _login_box = document.getElementById("login-box");
_login.onclick = function () {
_login_box.style.display = "block";
}
let _close = document.getElementById("close");
_close.onclick = function () {
_login_box.style.display = "none";
}
let _header = document.getElementById("header");
document.onmousedown = function (event) {
let offsetX = event.offsetX;
let offsetY = event.offsetY;
_header.onmousemove = function (event2) {
let mouseX = event2.clientX;
let mouseY = event2.clientY;
let loginX = mouseX - offsetX + "px";
let loginY = mouseY - offsetY + "px";
_login_box.style.left = loginX;
_login_box.style.top = loginY;
}
}
document.onmouseup = function () {
_header.onmousemove = null;
}