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