jquery案例:div对话框(动态创建) 作者:马育民 • 2022-08-11 10:23 • 阅读:10033 # 说明 使用时只需要引入 `.js` 文件即可 ### 技术难度 - js 动态引入 `.css` 文件 - 循环绑定事件,需要用到函数封装 或 闭包 ### html ``` Document ``` ### css ``` .window{ width: 300px; margin: 0 auto; border: 1px solid #999; background-color: #fff; display: none; position:absolute; z-index: 100; } .windowBg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.3; display: none; } .win-title{ height: 50px; line-height: 50px; padding: 0 10px; border-bottom: 1px solid #c5c5c5; color: #333; border-radius: 2px 2px 0 0; } .win-info{ padding: 20px; line-height: 24px; } .win-bottom{ text-align: right; padding: 0 15px 10px 0px; } .win-btn{ display: inline-block; border-color: #1E9FFF; background-color: #1E9FFF; color: #fff; width: 60px; height: 30px; text-align: center; } ``` ### js ``` /* * 显示对话框 * title:对话框标题 * msg:对话框显示的提示信息 * btns:数组结构,定义按钮的文字内容 * funs:数组结构,元素是函数对象,与按钮向对应的事件函数 */ function openDialog(winTitle,msg,btns,funs){ // var body = document.getElementsByTagName("body")[0] let body = $("body") var win = $("") // body.appendChild(win) // jquery的方式,将元素添加body中 body.append(win) win.addClass("window") var title = $("") title.addClass("win-title") title.html(winTitle) win.append(title) var info = $("") info.addClass("win-info") info.html(msg) win.append(info) var bottom = $("") bottom.addClass("win-bottom") win.append(bottom) var winBg = $("") body.append(winBg) winBg.addClass("windowBg") winBg.css("display","block") winBg.on("click",function(e){ closeWin(win,winBg) }) let $window = $(window) win.css("display","block") win.css("top",($window.height() - win.height() )/2+"px") win.css("left",($window.width() - win.width() )/2+"px") var i = 0 btns.forEach(function(e){ var btn = $("") btn.addClass("win-btn") btn.html( e ) bottom.append(btn) // bindClick(btn,funs[i]) btn.on("click",bindClick(funs[i],win,winBg)) i++ }) $window.on("resize",function(){ win.css("top",($window.height() - win.height() )/2+"px") win.css("left",($window.width() - win.width() )/2+"px") }) } function closeWin(win,winBg){ win.remove() winBg.remove() } function bindClick(f,win,winBg){ return function(){ f() closeWin(win,winBg) } } // 引入dialog.css !function(){ var link = $("") link.attr("rel","stylesheet") link.attr("type","text/css") link.attr("href","./css/dialog.css") var head = $("head"); head.append(link); }() ``` 原文出处:http://malaoshi.top/show_1IX3qFpKf1Vb.html