layer彈窗內容顯示不全的解決方法

最近做項目遇到一個問題，就是layer彈窗高度設置自適應，大分辨率的電腦上顯示沒問題，結果在小分辨率的電腦上，因為彈窗中間的內容比較多，導致高度撐得比較大，結果彈窗的內容只能看到中間一部分，頭部跟按鈕部分直接被遮擋看不見了，查了很多文檔，設置了最大高度，也沒能解決，最后總算找到一種解決方法，問題如下圖：

解決方法：

解決方法就是獲取該彈窗的寬高，再獲取瀏覽器可視區域的寬度和高度，比較兩個寬高的大小，然后再通過layer.style(layerIndex, {})重新設置彈出窗口的大小和位置。

1、定義變量：

var layerIndex;
var layerInitWidth;
var layerInitHeight;

2、在layer.open的完成事件中獲取窗口初始大小及窗口索引

success:function(layero, index){
    layerIndex = index; //獲取當前窗口的索引
    layerInitWidth = $("#layui-layer"+layerIndex).width(); //獲取layer的寬度
    layerInitHeight = $("#layui-layer"+layerIndex).height(); //獲取layer的高度
    common.resizeLayer(layerIndex,layerInitWidth,layerInitHeight); //調用resizeLayer方法 
},

3、resizeLayer方法

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;
    layer.style(layerIndex, {
        top: 0,
        width: minWidth,
        height: minHeight
    });
}

4、監聽resize函數，每次窗口大小變化都調用一次這個方法

$(window).resize(function() {
    common.resizeLayer(layerIndex,layerInitWidth,layerInitHeight);
});