JS实现可移动模态框_javascript技巧_

         增加     
     
         
             
                 增加                 ×             
             
                 
                     用户名                     {{ uh.username }}                 
                 
                     密码                     {{ uh.password }}                 
                 
                     提交                 
             
         

* {    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; }

// 添加页面加载事件 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);         });     }); } });