站长之家html弹窗,Layui弹出层加载做编辑页面的方法

Love The Way You Lie 2022-10-10 06:25 164阅读 0赞

layui是一款优秀的模块化前端框架。利用layui弹出层做编辑页面

先上效果图

![837f6f3a78d06c5f37d96831d0f2efeb.png][]

基本准备，引入layui的layui.css,layui.js文件

Js方法/\*\* \* 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件 \* @param \{\} title 标题 不显示为false \* @param \{\} area 大小 \["400px","500px"\] 或者 "400px"--->只设置宽度 \* @param \{\} path 弹出页面路径 \* @param \{\} sucFunName 执行保存操作后再弹出页面中的保存方法名称 \* @param \{\} callBack 执行保存操作之后的其他操作 \* @returns \{\} \*/function openDetial(title, area, path, sucFunName, callBack) \{ layer.open(\{ type: 2, title: title, //不显示标题栏 closeBtn: 2, area: area, shade: 0.8, id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748 btn: \['保存', '取消'\], btnAlign: 'r', moveType: 1, //拖拽模式，0或者1 content: path, yes: function (index, layero) \{ var btn = layero.find('.layui-layer-btn').find('.layui-layer-btn0'); alert("-----"); try \{ var \_ifr = btn\[0\].parentNode.parentNode.getElementsByClassName("layui-layer-content")\[0\].children\[0\].contentWindow || btn\[0\].parentNode.parentNode.getElementsByClassName("layui-layer-content")\[0\].children\[0\].children\[0\].contentWindow; var func = new Function('\_ifr', "return \_ifr." + sucFunName + "();"); var flg = func(\_ifr); if (flg == false) \{ return false; \} else \{ if (callBack != null) callBack(); window.location.reload(); \} \} catch (ex) \{ \} \}, btn2: function (index, layero) \{ \} \});\}

以下是测试页面 测试页面中具备保存方法ApplicationSave()

调用 如下参数中的ApplicationSave和编辑页面的方法名一致openDetial("列表维护", \['600px', '550px'\], "./editor.html", "ApplicationSave", function() \{alert("执行完了");\});

有兴趣的小伙伴，可以试试

以上这篇Layui弹出层 加载 做编辑页面的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持IIS7站长之家。

[837f6f3a78d06c5f37d96831d0f2efeb.png]: /images/20221005/86f0ccba8bb5480a84ca772f679e995b.png