JS如何實(shí)現(xiàn)可移動(dòng)模態(tài)框

今天小編給大家分享一下JS如何實(shí)現(xiàn)可移動(dòng)模態(tài)框的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

點(diǎn)擊增加彈出模態(tài)框。

這個(gè)模態(tài)框可以移動(dòng)的。

由于我寫的項(xiàng)目是egg.js前后端分離，需要獲取數(shù)據(jù)庫(kù)內(nèi)容，所以以下代碼中的{{uh.username}}自己根據(jù)實(shí)際情況進(jìn)行修改。

1.首先在前端頁(yè)面中添加以下代碼：

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

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;
   /* 鼠標(biāo)變小手 */
   cursor: pointer;
}
.model-box button:hover {
   color: #fff;
   border-color: #409eff;
   background-color: #409eff;
}
/* 模態(tài)框 start */
.model-box {
   /* 隱藏模態(tài)框 */
   display: none;
   position: fixed;
   top: 50px;
   left: 80px;
   width: 100%;
}
.model-box .content {
   position: absolute;
   top: 5px;
   /* calc方法可以自動(dòng)計(jì)算數(shù)值 */
   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;
   /* 讓子元素水平與兩端對(duì)齊 */
   justify-content: space-between;
   height: 60px;
   line-height: 60px;
   /* 鼠標(biāo)移入呈現(xiàn)移動(dòng)光標(biāo) */
   cursor: move;
}
.model-box .content .title span {
   font-size: 18px;
   color: #333;
}
.model-box .content .title i {
   /* i標(biāo)簽?zāi)J(rèn)是斜體 這個(gè)屬性可以變正 */
   font-style: normal;
   font-size: 24px;
   color: #909399;
   cursor: pointer;
}
/* 鼠標(biāo)移入變色 */
.model-box .content .title i:hover {
   color: #409eff;
}
.model-box .content form .form-input {
   margin: 5px 0;
}
/* 因?yàn)閘abel元素的for屬性和input元素id屬性設(shè)置了相同的屬性值 所以就可以通過label元素選中 輸入框 布局已完成  */
.model-box .content form .form-input label {
   font-size: 14px;
   color: #606266;
   cursor: pointer;
}
.model-box .content form .form-input input {
   /* 取消輸入框默認(rèn)的輪廓 */
   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;
}
/* 輸入框獲取焦點(diǎn)變色 */
.model-box .content form .form-input input:focus {
   border-color: #409eff;
}
.model-box .content form .form-input button {
   /* 讓按鈕浮動(dòng)到右側(cè) */
   float: right;
   margin-top: 10px;
}

3.js部分

// 添加頁(yè)面加載事件
window.addEventListener("load", () => {
    // 獲取打開按鈕
    const open = document.querySelector(".open");
    // 獲取關(guān)閉按鈕
    const close = document.querySelector(".close");
    // 獲取整個(gè)大的模態(tài)框
    const fillScreen = document.querySelector(".model-box");

    // 獲取模態(tài)框可移動(dòng)的頭部區(qū)域
    const header = document.querySelector(".title");

    // 獲取模態(tài)框珠主區(qū)域
    const modelBox = document.querySelector(".content");

    //element.addEventListener() 方法為指定元素添加事件句柄
    // 打開功能
    if(open){
    open.addEventListener("click", () => {
        // 點(diǎn)擊打開按鈕 改變display屬性值
        fillScreen.style.display = "block";
    });
   }

    // 關(guān)閉功能
    if(close){
    close.addEventListener("click", () => {
        fillScreen.style.display = "none";
    });
    }
    // 移動(dòng)功能 為header添加鼠標(biāo)按下事件
    if(header){
    header.addEventListener("mousedown", (event) => {
        // 讓模態(tài)框移動(dòng) 需要知道鼠標(biāo)在header區(qū)域的光標(biāo)位置 計(jì)算方式 是先算出鼠標(biāo)光標(biāo)在整個(gè)瀏覽器區(qū)域的位置 再算出模態(tài)框距離瀏覽器邊緣位置的大小 相減
        // event.pageX可以獲取鼠標(biāo)光標(biāo)距離瀏覽器邊緣位置的大小
        // modelBox.offsetLeft 可以獲取到模態(tài)框區(qū)里瀏覽器左邊框的距離
        const x = event.pageX - modelBox.offsetLeft;
        const y = event.pageY - modelBox.offsetTop;
        console.log(x, y);
        // 在按下事件內(nèi)添加移動(dòng)事件
        document.addEventListener("mousemove", move);
        // 做鼠標(biāo)彈起事件 
        function move(event) {
            // 算出移動(dòng)時(shí)的模態(tài)框的位置距離 并賦值 原理和上面求x,y一樣
            // css屬性值需要單位 
            modelBox.style.left = event.pageX - x + "px";
            modelBox.style.top = event.pageY - y + "px";
        }
        //onmouseup 當(dāng)松開鼠標(biāo)按鈕時(shí)運(yùn)行腳本    removeEventListener移除由 addEventListener() 方法添加的 "mousemove" 事件
        document.addEventListener("mouseup", () => {
            document.removeEventListener("mousemove", move);
        });
    });
}
});

以上就是“JS如何實(shí)現(xiàn)可移動(dòng)模態(tài)框”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。