前言

• ruoyi 4.6

自定義layer

function reply(id) {var layerTarget = top;var getFullWidth = (target)=>{return target?$(target).width():$(layerTarget).width();};var getFullHeight = (target)=>{return target?$(target).height():$(layerTarget).height();};var getWidth = (target)=>{return getFullWidth(target) * 0.95;};var getHeight = (target)=>{return getFullHeight(target) * 0.95;};layerTarget.layer.open({type: 2,area: [getWidth(layerTarget) + 'px', getHeight(layerTarget) + 'px'],fix: false, /*不固定*/resize: false, /*可調節大小*/maxmin: true, /*最大化按鈕可用*/shade: 0.3,title: "查看留言",content: prefix+"/reply/"+id,// 彈層外區域關閉shadeClose: true,/*按鈕事件：btn1/yes, btn2，btn3，以此類推yes: function(){}btn2: function(){}*//*按鈕樣式：btn0, btn1，btn2，以此類推.layui-layer-btn .layui-layer-btn0{ ... }*/btn: ['通過并回復', '駁回' , '關閉'],success: function(layero, index){var layerWindow = layero.find('iframe')[0].contentWindow;/*修改按鈕樣式*/$(".layui-layer-btn .layui-layer-btn1", layero).css({"background": "#f60","color": "#fff","border": "1px solid #f60","border-radius": "3px",});$(".layui-layer-btn .layui-layer-btn2", layero).css({"background": "#fff","color": "#404a58","border": "1px solid #c0c4cd","border-radius": "3px",});/*窗口resize事件*/$(layerWindow.parent).resize(function() {if (!layerWindow.parent) {return;}layerWindow.parent.layer.style(index, {width: getWidth(layerWindow.parent)+'px', height: getHeight(layerWindow.parent)+'px'});});},/*右上角關閉按鈕觸發的回調：默認會自動觸發關閉。如果不想關閉，return false即可*/cancel: function(index, layero) {return true;},/*第一個按鈕事件，也可以叫btn1*/yes: function(index, layero) {var iframeWin = layero.find('iframe')[0];iframeWin.contentWindow.refreshTarget = window;iframeWin.contentWindow.submitHandler(index, layero);},btn2: function(index, layero) {var iframeWin = layero.find('iframe')[0];iframeWin.contentWindow.refreshTarget = window;iframeWin.contentWindow.rejectSubmitHandler(index, layero);},});}

• layer窗體占用當前窗體95%的寬、高
• 三個按鈕：[‘通過并回復’, ‘駁回’ , ‘關閉’]
• 設定按鈕樣式
• 點擊按鈕后調用iframe頁面中的方法
• layer窗體由iframe頁面中的方法關閉
• 瀏覽器大小改變時，layer窗體大小跟著改變

總結

以上是生活随笔為你收集整理的【若依(ruoyi)】自定义layer的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。