Layui弹出层如何设置自适应宽度但保持高度固定-Layui教程-PHP中文网

Layui layer.open 的 area 参数支持宽度用百分比（如['90%', '300px']）、高度用固定像素，但必须为字符串格式且避免混用单位；type:2 层需配合 fixed: true 防滚动偏移，并注意移动端键盘抬升、跨域 iframe 溢出等实际适配问题。

area 参数里宽度用百分比、高度写死像素值

直接在 layer.open() 的 area 里传 ['90%', '300px'] 就能实现：宽度随屏幕缩放，高度强制固定。layui 会把百分比转为当前视口宽度的对应值，而像素值则原样应用到弹层容器上。

注意别写成 ['90%', 300]（数字类型），Layui 内部只认字符串格式的尺寸；也别混用单位，比如 ['90%', '30vh'] —— vh 单位在部分老版本 Layui 中不被识别，容易退化成默认高度。

type:2（iframe 层）下 height 固定后内容溢出怎么办

iframe 层即使设了固定高度，内容仍可能撑破容器或出现双滚动条——因为 iframe 自身没做内部高度同步。常见于加载外部页面时，其 body 高度超出 iframe 容器。

给 iframe 加 style="width:100%;height:100%;border:none;"，并确保其父容器（.layui-layer-content）没额外 padding/margin 干扰计算
如果目标页面可控，在其上加 style="margin:0;overflow:hidden;"，避免默认边距和滚动行为干扰
不可控的跨域 iframe，不要强求自适应，固定高度 + overflow:auto 是最稳方案

移动端固定高度弹层容易被键盘顶起，怎么防抖

iOS Safari 和部分安卓浏览器在输入框聚焦时会抬升 viewport，导致固定高度弹层上移、遮挡内容。这不是 Layui 的 bug，而是浏览器行为。

解决思路是监听 focusin 和 blur 事件，动态调整弹层 top 值：

layui手机车牌号码键盘代码

layui手机车牌号码键盘代码是一款基于jQuery跟layui制作的手机端车牌号码输入弹出键盘选择，支持新能源汽车车牌输入格式代码。

下载

success: function(layero, index) {
  const $input = layero.find('input,textarea');
  $input.on('focusin', function() {
    layer.style(index, { top: $(window).scrollTop() + 'px' });
  });
  $input.on('blur', function() {
    layer.style(index, { top: '50%' });
  });
}

这个操作必须放在 success 回调里，否则 DOM 还没挂载，找不到 input 元素。