遇到的問題

??最近在使用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事件自動調整