JS如何实现可移动模态框

今天小编给大家分享一下js如何实现可移动模态框的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

点击增加弹出模态框。

这个模态框可以移动的。

由于我写的项目是egg.js前后端分离，需要获取数据库内容，所以以下代码中的{{uh.username}}自己根据实际情况进行修改。

首先在前端页面中添加以下代码：

<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" >                <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>

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;}.model-box {      display: none;   position: fixed;   top: 50px;   left: 80px;   width: 100%;}.model-box .content {   position: absolute;   top: 5px;      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 {      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;}.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;}

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);        });    });}});

以上就是“JS如何实现可移动模态框”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。