关于layui的layer.open弹出层高度自适应的解决
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了关于layui的layer.open弹出层高度自适应的解决，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2248字，纯文字阅读大概需要4分钟。
内容图文
在使用layui的layer插件打开弹出层的时候，会出现弹出层的Iframe高度设置为默认的150px，这样会导致出现滚动条或者内容显示不全的现象，在网上面也搜索了对应的解决方案。
方案一：在弹窗的时候，设置area只规定宽度，不设置高度，让插件自适应，如下：
layui.layer.open({
type:2,
//此处只规定宽度，不规定高度，让插件自适应高度
area:['300px'],
content:'www.baidu.com',
shade:0.5,
title:'百度页面'
})
但是这个方法亲测是无效的，无法达到高度自适应的效果。
方案二：同理，把area设置为auto，让插件自适应高度和宽度
layui.layer.open({
type:2,
//此处设置为auto，让插件自适应高度和宽度
area:['auto'],
content:'www.baidu.com',
shade:0.5,
title:'百度页面'
})
这个亲测也是无效的。
方案三：在弹窗前把元素的高度和宽度计算出来，将计算的高度和宽度传入弹窗参数，从原理上是可行的，但是适用于页面内元素弹窗，对于加载网页链接的iframe弹出层，效果有待考究。
var sampleElement=document.getElementById('sampleElementID');
layui.layer.open({
type:1,
//此处设置元素的宽高度，让插件指定弹出iframe的高度和宽度
area:[`${sampleElement.offsetWidth}px`,`${sampleElement.offsetHeight}px`],
content:sampleElement.outerHTML,
shade:0.5,
title:'百度页面'
})
此方法有局限性，显示内容要是页面内元素，如果是打开链接的iframe的方式，有待考究。
方案四：在弹窗页面加载成功之后，使用layer.iframeAuto对iframe进行重新高度定义。
layui.layer.open({
type: 2,
title:'百度页面',
area: '300px',
shade:0.5,
content:'www.baidu.com',
success: function(layero, index) {
//对加载后的iframe进行宽高度自适应
layer.iframeAuto(index);
}
});
此方法有待考究，对于页面内的元素是有效，但是对于链接的iframe层的高度适应需要测试
方案五：在弹出层成功之后 ，对iframe内容进行重新计算高度。
layui.layer.open({
type: 2,
title:'百度页面',
area: '300px',
shade:0.5,
content:'www.baidu.com',
success: function(layero, index) {
//找到当前弹出层的iframe元素
var iframe = layui.$(layero).find('iframe');
//设定iframe的高度为当前iframe内body的高度
iframe.css('height', iframe[0].contentDocument.body.offsetHeight);
//重新调整弹出层的位置，保证弹出层在当前屏幕的中间位置
$(layero).css('top', (window.innerHeight - iframe[0].offsetHeight) / 2);
}
});
此方法亲测有效，不管是对于链接的弹窗还是页面内元素的弹窗，都能自适应高度。唯一的问题，在处理高度的时候，是弹窗完成后重新计算的，所以会视觉上会有高度的变化，不过处理速度快，基本上肉眼看不出。
用于记录自己遇到的问题，如果有错误，希望大家指正！
内容总结
以上是互联网集市为您收集整理的关于layui的layer.open弹出层高度自适应的解决全部内容，希望文章能够帮你解决关于layui的layer.open弹出层高度自适应的解决所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。