关于前端:layui-弹窗内外自适应问题解决方法

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) {
                //按钮【勾销】的回调
              },
            });
        });
      };

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理