layui 弹窗内外自适应问题解决方法

Posted 2021-09-04 洛阳醉长安行

layui弹窗如使用百分比，当屏幕小的时候，希望弹窗不要跟着缩小，需要弹窗变大且合理的显示弹窗的内容

首先需要根据网页高度设置弹窗的宽高

          var area = ["50%", "60%"];
         
          if ($(document).height() <= 768){ //防止pc分辨率过小1366x680
            area = ["80%", "95%"];
          }

然后在弹窗渲染完成的回调中对弹窗内的容器调整高度，充满整个弹窗，并设置超出滚动

                   $("#tree_2")
                  .css("height", $("#handler").height() - 70 + "px")
                  .css("overflow-y", "scroll"); //调整树高度自适应-70为减掉搜索框高度

最终实现代码：

  function showDialog() {
        layer.ready(function () {
          var area = ["50%", "60%"];
         
          if ($(document).height() <= 768){ //防止pc分辨率过小1366x680
            area = ["80%", "95%"];
          }
            layer.open({
              type: 1,
              title: "选择处理人",
              id: "handler",
              area: area,
              content: $("#dialogTree"),
              btn: ["确定", "取消"],
              zIndex: layer.zIndex,
              success: function (layero) {
                $("#tree_2")
                  .css("height", $("#handler").height() - 70 + "px")
                  .css("overflow-y", "scroll"); //调整树高度自适应-70为减掉搜索框高度
              },
              end: function () {},
              btnAlign: "c",
              yes: function (index, layero) {
                //按钮【确认】的回调
               ...
                layer.close(index);
              },
              btn2: function (index, layero) {
                //按钮【取消】的回调
              },
            });
        });
      };