目录
总结:
前言：
个人学习内容分享
特效展示
实现代码：
html部分：
模态框形式的登录窗口
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS 可拖动模态框</title>
<link rel="stylesheet" href="../css/2.css">
<script src="../js/2.js"></script>
</head>
<body>
<button class="open">这是第二个</button>
<div class="model-box">
<div class="content">
<div class="title">
<span>好好学习，天天向上</span>
<i class="close">x</i>
</div>
<form action="#">
<div class="form-input">
<label for="username">请输入用户名：</label>
<input type="text"id="username">
</div>
<div class="form-input">
<label for="password">请输入密码：</label>
<input type="password"id="password">
</div>
<div class="form-input">
<button onclick="login()">点击登录</button>
</form>
</div>
</div>
</body>
</html>css部分：
* {
margin: 0;
padding: 0;
user-select: none; /*文字禁止选中*/
box-sizing: border-box; /* 盒子模型 */
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;/* 高度占浏览器可视区域的总高度 */
overflow: hidden;
}
button {
outline: 0;/* 取消轮廓 */
width: 100px;
height: 40px;
color: #ff4340;
border-radius: 4px;
border: 1px solid #f3f02a;
background-color: #f7c9f8;
transition: all 0.3s; /* 过渡0.3秒 */
cursor: pointer; /* 小手光标 */
}
.open{
width: 200px;
height: 80px;
font-size: 30px;
}
button:hover {
color: #f7c9f8;
border-color: #f3f02a;
background-color: #ff4340;
}
/* 模态框start */
.model-box {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.45);
}
.model-box .content {
position: absolute;
top: 180px;
left: calc(-290px + 50%); /* calc方法可以自动计算数值 */
width: 600px;
height: 400px;
border-radius: 5px;
padding: 0 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
.model-box .content .title {
display: flex;
justify-content: space-between; /* 让子元素水平与两端对齐 */
height: 60px;
line-height: 60px;
cursor:move;/*移动光标*/
}
.model-box .content .title span {
font-family: "微软雅黑";
margin: 10px auto 0 ;
font-size: 30px;
color: #333;
}
.model-box .content .title i {
font-style: normal;
font-size: 40px;
letter-spacing: 5px;
color: #909399;
cursor: pointer;
}
.model-box .content .title i:hover {
color: #22272c;
}
.model-box .content form .form-input {
margin: 20px 0;
}
.model-box .content form .form-input label {
font-size: 20px;
color: #606266;
cursor: pointer;
}
.model-box .content form .form-input input {
outline: 0;
width: 100%;
height: 42px;
padding: 0 15px;
margin-top: 20px;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
.model-box .content form .form-input input:hover {
border-color: #c0c4cc;
}
.model-box .content form .form-input input:focus {/* 输入框获取焦点变色 */
border-color: #4093ff;
}
.model-box .content form .form-input button{
height: 40px;
line-height: 40px;
display: flex;
text-align: center;
justify-content: center;
margin:30px auto 0;
font-size: 20px;
}
/* 模态框end */js部分：
主要为实现登录和拖动
function login() {
var x = document.getElementById("username").value;
var y = document.getElementById("password").value;
if (x == "" || y == "") {
alert("你是不是什么都没填写呀 (～￣(OO)￣)ブ")
} else if (x == "520" && y == "1314") {
window.location.href = "#";
} else {
alert("你是不是填写错了呀，再好好想想吧");
}
}
// 添加页面加载事件
window.addEventListener('load', () => {
//获取打开按钮
const open = document.querySelector(".open")
//获取关闭按钮
const close = document.querySelector(".close");
//获取整个大的模态框
const model = document.querySelector(".model-box");
//获取模态框可移动的头部区域
const header = document.querySelector(".title");
// 获取模态框主区域
const modelBox = document.querySelector(".content");
//做打开模态框
open.addEventListener('click', () => {
// 点击打开按钮 改变display属性值
model.style.display = "block";
});
// 关闭模态框
close.addEventListener("click", () => {
model.style.display = "none";
});
//鼠标按下点击顶部框
header.addEventListener("mousedown", (event) => {
//event 获取事件对象
//event.pageX可以获取鼠标光标距离浏览器边缘位置的大小
//modelBox.offsetLeft可以获取到模态框区里浏览器左边框的距离
const x = event.pageX - modelBox.offsetLeft;
const y = event.pageY - modelBox.offsetTop;
console.log(x, y);
//
document.addEventListener("mousemove", move);
//编写move函数
function move(event) {
//算出移动时的模态框的位置距离并赋值
modelBox.style.left = event.pageX - x + "px";
modelBox.style.top = event.pageY - y + "px";
}
//鼠标弹起删除事件
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", move);
});
});
});总结：
主要包含成分为模态框，登录界面，窗口拖动，可以拆解单独用到网页功能构建中。
标签：模态,box,界面,form,color,content,model,框式 From： https://www.cnblogs.com/bubianyingzi/p/17008567.html