第JS實現(xiàn)可移動模態(tài)框本文實例為大家分享了JS實現(xiàn)可移動模態(tài)框的具體代碼，供大家參考，具體內(nèi)容如下

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

這個模態(tài)框可以移動的。

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

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

div

buttontype="submit"增加/button

/div

div

div

div

span增加/span

i×/i

/div

formmethod="POST"action="/add"

div

labelfor="username"用戶名/label

inputtype="text"name="username"value={{uh.username}}{{uh.username}}

/div

div

labelfor="username"密碼/label

inputtype="password"name="password"value={{uh.password}}{{uh.password}}

/div

div

buttontype="submit"提交/button

/div

/form

/div

/div

2.css樣式

*{

padding:0;

margin:0;

.content-topbutton{

/*取消按鈕自帶的輪廓*/

outline:0;

width:100px;

height:40px;

color:#409eff;

/*圓角屬性*/

border-radius:4px;

border:1pxsolid#b3d8ff;

background-color:#ecf5ff;

/*過渡*/

transition:all0.3s;

cursor:pointer;

.content-topbutton:hover{

color:#fff;

border-color:#409eff;

background-color:#409eff;

.model-boxbutton{

/*取消按鈕自帶的輪廓*/

outline:0;

width:100px;

height:40px;

color:#409eff;

/*圓角屬性*/

border-radius:4px;

border:1pxsolid#b3d8ff;

background-color:#ecf5ff;

/*過渡*/

transition:all0.3s;

/*鼠標變小手*/

cursor:pointer;

.model-boxbutton: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方法可以自動計算數(shù)值*/

left:calc(50%-210px);

width:420px;

border-radius:5px;

padding:020px;

/*盒子陰影*/

box-shadow:02px12pxrgba(0,0,0,0.2);

background-color:#fff;

.model-box.content.title{

/*彈性布局*/

display:flex;

/*讓子元素水平與兩端對齊*/

justify-content:space-between;

height:60px;

line-height:60px;

/*鼠標移入呈現(xiàn)移動光標*/

cursor:move;

.model-box.content.titlespan{

font-size:18px;

color:#333;

.model-box.content.titlei{

/*i標簽默認是斜體這個屬性可以變正*/

font-style:normal;

font-size:24px;

color:#909399;

cursor:pointer;

/*鼠標移入變色*/

.model-box.content.titlei:hover{

color:#409eff;

.model-box.contentform.form-input{

margin:5px0;

/*因為label元素的for屬性和input元素id屬性設置了相同的屬性值所以就可以通過label元素選中輸入框布局已完成

*/

.model-box.contentform.form-inputlabel{

font-size:14px;

color:#606266;

cursor:pointer;

.model-box.contentform.form-inputinput{

/*取消輸入框默認的輪廓*/

outline:0;

width:100%;

height:30px;

padding:08px;

margin-top:12px;

border:1pxsolid#dcdfe6;

border-radius:4px;

.model-box.contentform.form-inputinput:hover{

border-color:#c0c4cc;

/*輸入框獲取焦點變色*/

.model-box.contentform.form-inputinput:focus{

border-color:#409eff;

.model-box.contentform.form-inputbutton{

/*讓按鈕浮動到右側(cè)*/

float:right;

margin-top:10px;

}

3.js部分

//添加頁面加載事件

window.addEventListener("load",()={

//獲取打開按鈕

constopen=document.querySelector(".open");

//獲取關閉按鈕

constclose=document.querySelector(".close");

//獲取整個大的模態(tài)框

constfillScreen=document.querySelector(".model-box");

//獲取模態(tài)框可移動的頭部區(qū)域

constheader=document.querySelector(".title");

//獲取模態(tài)框珠主區(qū)域

constmodelBox=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)={

//讓模態(tài)框移動需要知道鼠標在header區(qū)域的光標位置計算方式是先算出鼠標光標在整個瀏覽器區(qū)域的位置再算出模態(tài)框距離瀏覽器邊緣位置的大小相減

//event.pageX可以獲取鼠標光標距離瀏覽器邊緣位置的大小

//modelBox.offsetLeft可以獲取到模態(tài)框區(qū)里瀏覽器左邊框的距離

constx=event.pageX-modelBox.offsetLeft;

consty=event.pageY-modelBox.offsetTop;

console.log(x,y);

//在按下事件內(nèi)添加移動事件

document.addEventListener("mousemove",move);

//做鼠標彈起事件

functionmove(event){

//算出移動時的模態(tài)框的位置距離并賦值原理和上面求x,y一樣

//css屬性值需要單位

modelBox.style.left=event.pageX-x+"px";

modelBox.style.top=event.pageY-y+"px";

}

//onmouseup當松開