JS实现可移动模态框
作者：yanbabyo
这篇文章主要为大家详细介绍了JS实现可移动模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现可移动模态框的具体代码，供大家参考，具体内容如下
点击增加弹出模态框。
这个模态框可以移动的。
由于我写的项目是egg.js前后端分离，需要获取数据库内容，所以以下代码中的{{uh.username}}自己根据实际情况进行修改。
1.首先在前端页面中添加以下代码：
<div class="content-top">
<button type="submit" class="open">增加</button>
</div>
<div class="model-box">
<div class="content">
<div class="title">
<span>增加</span>
<i class="close">×</i>
</div>
<form method="POST" action="/add" style="height: 250px;">
<div class="form-input">
<label for="username" >用户名</label>
<input type="text" name="username" value={{uh.username}}>{{ uh.username }}
</div>
<div class="form-input">
<label for="username">密码</label>
<input type="password" name="password" value={{uh.password}}>{{ uh.password }}
</div>
<div class="form-input">
<button type="submit">提交</button>
</div>
</form>
</div>
</div>2.css样式
* {
padding: 0;
margin: 0;
}
.content-top button {
/* 取消按钮自带的轮廓 */
outline: 0;
width: 100px;
height: 40px;
color: #409eff;
/* 圆角属性 */
border-radius: 4px;
border: 1px solid #b3d8ff;
background-color: #ecf5ff;
/* 过渡 */
transition: all 0.3s;
cursor: pointer;
}
.content-top button:hover {
color: #fff;
border-color: #409eff;
background-color: #409eff;
}
.model-box button {
/* 取消按钮自带的轮廓 */
outline: 0;
width: 100px;
height: 40px;
color: #409eff;
/* 圆角属性 */
border-radius: 4px;
border: 1px solid #b3d8ff;
background-color: #ecf5ff;
/* 过渡 */
transition: all 0.3s;
/* 鼠标变小手 */
cursor: pointer;
}
.model-box button:hover {
color: #fff;
border-color: #409eff;
background-color: #409eff;
}
/* 模态框 start */
.model-box {
/* 隐藏模态框 */
display: none;
position: fixed;
top: 50px;
left: 80px;
width: 100%;
}
.model-box .content {
position: absolute;
top: 5px;
/* calc方法可以自动计算数值 */
left: calc(50% - 210px);
width: 420px;
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-size: 18px;
color: #333;
}
.model-box .content .title i {
/* i标签默认是斜体 这个属性可以变正 */
font-style: normal;
font-size: 24px;
color: #909399;
cursor: pointer;
}
/* 鼠标移入变色 */
.model-box .content .title i:hover {
color: #409eff;
}
.model-box .content form .form-input {
margin: 5px 0;
}
/* 因为label元素的for属性和input元素id属性设置了相同的属性值 所以就可以通过label元素选中 输入框 布局已完成 */
.model-box .content form .form-input label {
font-size: 14px;
color: #606266;
cursor: pointer;
}
.model-box .content form .form-input input {
/* 取消输入框默认的轮廓 */
outline: 0;
width: 100%;
height: 30px;
padding: 0 8px;
margin-top: 12px;
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: #409eff;
}
.model-box .content form .form-input button {
/* 让按钮浮动到右侧 */
float: right;
margin-top: 10px;
}3.js部分
// 添加页面加载事件
window.addEventListener("load", () => {
// 获取打开按钮
const open = document.querySelector(".open");
// 获取关闭按钮
const close = document.querySelector(".close");
// 获取整个大的模态框
const fillScreen = document.querySelector(".model-box");
// 获取模态框可移动的头部区域
const header = document.querySelector(".title");
// 获取模态框珠主区域
const modelBox = document.querySelector(".content");
//element.addEventListener() 方法为指定元素添加事件句柄
// 打开功能
if(open){
open.addEventListener("click", () => {
// 点击打开按钮 改变display属性值
fillScreen.style.display = "block";
});
}
// 关闭功能
if(close){
close.addEventListener("click", () => {
fillScreen.style.display = "none";
});
}
// 移动功能 为header添加鼠标按下事件
if(header){
header.addEventListener("mousedown", (event) => {
// 让模态框移动 需要知道鼠标在header区域的光标位置 计算方式 是先算出鼠标光标在整个浏览器区域的位置 再算出模态框距离浏览器边缘位置的大小 相减
// event.pageX可以获取鼠标光标距离浏览器边缘位置的大小
// modelBox.offsetLeft 可以获取到模态框区里浏览器左边框的距离
const x = event.pageX - modelBox.offsetLeft;
const y = event.pageY - modelBox.offsetTop;
console.log(x, y);
// 在按下事件内添加移动事件
document.addEventListener("mousemove", move);
// 做鼠标弹起事件
function move(event) {
// 算出移动时的模态框的位置距离 并赋值 原理和上面求x,y一样
// css属性值需要单位
modelBox.style.left = event.pageX - x + "px";
modelBox.style.top = event.pageY - y + "px";
}
//onmouseup 当松开鼠标按钮时运行脚本 removeEventListener移除由 addEventListener() 方法添加的 "mousemove" 事件
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", move);
});
});
}
});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。