本文实例为大家分享了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); }); }); } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。