layui彈出層layer過大被遮擋解決辦法-resize事件自動調整
阿新 • • 發佈:2018-03-09
思路 pla title 位置 相關 無法 dex 前端 情況
遇到的問題
??最近在使用layui做一個管理系統,由於前端技術有限,在開發過程中也遇到這樣那樣的問題,即比較簡單的問題有時也要搞半天。。
??layer彈出窗口在彈出時指定了area,彈出後,如果當前頁面(iframe)大小比彈出的窗口小,那麽就會出現無法操作彈出窗口的尷尬情況。查看官方文檔以及搜索引擎,都沒有找到好的辦法。如圖所示:
??這時,唯有放大整個頁面才能看到完全的彈出窗口,才可以操作。
我的嘗試
??我的思路時通過監聽頁面的resize事件,通過layer.style(layerIndex, {})重新設置彈出窗口的大小和位置。
- 1、定義頁面變量
var layerIndex; var layerInitWidth; var layerInitHeight;
- 2、在layer.open的完成事件中獲取窗口初始大小及窗口索引
??在success方法中取得相關值
//獲取當前彈出窗口的索引及初始大小 layerIndex = index; layerInitWidth = $("#layui-layer"+layerIndex).width(); layerInitHeight = $("#layui-layer"+layerIndex).height(); //此處調用是因為,初始彈出窗口時,window也可能小於窗口,這裏調用一次調整,resizeLayer為自定義的方法,後面給出 utils.resizeLayer(layerIndex,layerInitWidth,layerInitHeight);
完整片斷:
laytpl($(‘#edit-tpl‘).html()).render(d, function(html) { layer.open({ type: 1, title: ‘新增‘, content: html, maxmin: true, area: [‘800px‘, ‘690px‘], btn: [‘提交‘, ‘重置‘, ‘取消‘], yes: function(index, layero) { layerIndex = index; $(‘form[lay-filter="form-edit"]‘).find(‘button[lay-submit]‘).click(); return false; }, btn2: function(index, layero) { layerIndex = index; $(‘form[lay-filter="form-edit"]‘).find(‘button[type="reset"]‘).click(); return false; }, success: function(layero, index) { //獲取當前彈出窗口的索引及初始大小 layerIndex = index; layerInitWidth = $("#layui-layer"+layerIndex).width(); layerInitHeight = $("#layui-layer"+layerIndex).height(); //utils.resizeLayer(layerIndex,layerInitWidth,layerInitHeight); form.render(null, ‘form-edit‘); } }); });
- 3、監聽window的resize事件,重新設置大小
??監聽window變化,調用resizeLayer方法重設置彈出窗口大小
$(window).resize(function() { utils.resizeLayer(layerIndex,layerInitWidth,layerInitHeight); });
- 4、重新設置函數
??若window比窗口小,取小的值來設置彈出窗口的大小,因為多個頁面都要調用,在此封裝到utils中作為一個函數來調用
resizeLayer:function (layerIndex,layerInitWidth,layerInitHeight) { var docWidth = $(document).width(); var docHeight = $(document).height(); var minWidth = layerInitWidth > docWidth ? docWidth : layerInitWidth; var minHeight = layerInitHeight > docHeight ? docHeight : layerInitHeight; console.log("doc:",docWidth,docHeight); console.log("lay:",layerInitWidth,layerInitHeight); console.log("min:",minWidth,minHeight); layer.style(layerIndex, { top:0, width: minWidth, height:minHeight }); }
-
5、效果
初始時窗口比window小的情況,自動適應了
調整window大小,自動適應
window正常情況下,窗口使用原始設置的大小
總結
??初學layui做項目,前端也不熟悉,只有先這樣解決了,各位有好的方法歡迎留言,謝謝!
layui彈出層layer過大被遮擋解決辦法-resize事件自動調整