原生js實現模態框拖動

2022-09-07 09:00:11 字數 990 閱讀 4120

由於本人水平有限,不足之處請大佬指出!

1.引入reset.css

2.編寫html檔案

控制內容的高度:

確認修改

注意:內容的高度相對於頭部和頂部的份數

顯示模態框

x3.編寫index.css檔案

body 

.drag 

.drag .drag-header 

.drag .drag-body 

.drag .drag-footer 

.drag .drag-header .close 

4.編寫js檔案

window.onload = function () ,

drag: null,

getdrag: function() ,

getclosebtn: function() ,

getshowmodalbtn: function() 

}// 模態框拖動

var dragmodal = ,

press: function() 

})},

move: function() ,

movefn: (e) => ,

up: function () })}

};dragmodal.init();

// 輸入值控制內容大小功能

var funstate = ,

dragbody: null,

ctrlbodysizeipt: null,

ctrlbodysizeipt: null,

ctrlbodysize: function() )}}

funstate.init();

// 關閉模態框

var closestate = )

commonstate.getshowmodalbtn().addeventlistener('click', () => )}}

closestate.init();

}

原生js實現簡單的模態框

html部分 顯示大圖 js部分 var btn document.getelementbyid showmax var mtclose document.getelementsbyclassname mtclose 0 var modalbox document.getelementbyid mo...

原生模態對話方塊

模態框展示 模態框標題 html css js原生實現響應式模態框演示!html css js原生實現響應式模態框演示!html css js原生實現響應式模態框演示!html css js原生實現響應式模態框演示!html css js原生實現響應式模態框演示!html css js原生實現響應式...

原生模態框,遮罩層

哈哈哈哈中信營業廳 li liclass q2 高堯三 li liclass q3 漢中門分店 li liclass q4 會員有效期 2020 10 10 li ul divclass line div div button class b1 取消 button button class b2 確...