遇到的問題

??最近在使用layui做一個管理系統(tǒng)，由于前端技術有限，在開發(fā)過程中也遇到這樣那樣的問題，即比較簡單的問題有時也要搞半天。。
??layer彈出窗口在彈出時指定了area，彈出后，如果當前頁面（iframe）大小比彈出的窗口小，那么就會出現(xiàn)無法操作彈出窗口的尷尬情況。查看官方文檔以及搜索引擎，都沒有找到好的辦法。如圖所示：

彈出窗口比當前頁面大

??這時，唯有放大整個頁面才能看到完全的彈出窗口，才可以操作。

我的嘗試

??我的思路時通過監(jiān)聽頁面的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();
//此處調(diào)用是因為，初始彈出窗口時，window也可能小于窗口，這里調(diào)用一次調(diào)整，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、監(jiān)聽window的resize事件，重新設置大小
  ??監(jiān)聽window變化，調(diào)用resizeLayer方法重設置彈出窗口大小

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

• 4、重新設置函數(shù)
  ??若window比窗口小，取小的值來設置彈出窗口的大小，因為多個頁面都要調(diào)用，在此封裝到utils中作為一個函數(shù)來調(diào)用

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小的情況，自動適應了
  
  
  調(diào)整window大小，自動適應
  
  
  window正常情況下，窗口使用原始設置的大小

總結

??初學layui做項目，前端也不熟悉，只有先這樣解決了，各位大神，有好的方法歡迎留言告訴，謝謝！

PS:首次使用markdown寫第一博文，雖然耗費時間，但感覺挺好~

[java編程之旅]