layer弹出iframe的高度不自适应。一直是150px

layer弹出iframe的高度不自适应。一直是150px

通常我们用layer都是点击事件中弹出layer,如下:

$("#loginbtn").click(function(){
    layer.open({
    type: 2,
    title: '欢迎登录',
    skin: 'login-class',
    maxmin: false,
    title: false,
    closeBtn: 0,
    shadeClose: true, //点击遮罩关闭层
    area: ['760px', '80%'],
    btn:['1','2'],
    content: 'login.html',
    offset: '18%',
    })
});

通常,我们这样写没问题,但是,当我们需要页面加载后直接就弹出layer时,最常见应用场景就是注册页面加载后直接触发layer,弹出注册协议。

这时候问题来了,我们会发现 弹出的iframe的高度一直是150px,高度并不自适应。

 经分析:原因就是layer计算ifram的时候,页面还没加载完全,而ifram本身就是通过页面的高度的进行计算的(因为我高度设置的80%)

    

两种解决方案:

1、将 80%高 设置成具体的数值,比如 300px,但是这样做,不能达到弹出小窗自适应的效果

2、等页面完全加载完毕后,再出发layer,代码如下:

$(document).ready(function() {
	window.onload = function() {
		layer.open({
			type: 2,
			title: '注册协议',
			maxmin: false,
			shadeClose: false, // 点击遮罩关闭层
			area: ['1096px', '80%'],
			content: 'registeragree.html',
			offset: 'auto',
			btnAlign: 'c',
			closeBtn: 0,
			btn: ['同意并继续', '取消'],
			yes: function(index, layero) {
				layer.close(index);
				initPage();
				getVerifyCodeImg();
			},
			btn2: function(index, layero) {
				window.location.href = "index.html";
			}
		});
	} 
});
这样,这个问题就解决了。


  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: 在使用 layer.js 的时候,可以通过设置`area`属性来实现弹窗高度自适应。`area`属性有两种设置方式: 1. 通过设置固定的宽高,如`area: ['500px', '300px']`,这种方式不太适合高度不确定的情况。 2. 通过设置自适应的宽高,如`area: ['500px', 'auto']`,这种方式可以让弹窗的高度根据内容自适应,但需要保证内容不会溢出弹窗。 下面是一个示例代码,可以参考: ``` layer.open({ type: 1, title: '自适应高度的弹窗', area: ['500px', 'auto'], content: '<div style="padding: 20px;">这是一段高度可变的文本内容。</div>' }); ``` ### 回答2: layer().open是一种弹窗插件,在使用过程中可以根据实际内容的高度进行自适应调整。它可以根据弹窗中的内容的高度来自动调整弹窗的高度,保证内容能够完整显示且不会出现溢出或截断的情况。 在调用layer().open方法时,可以设置content属性来指定弹窗的内容,内容可以是一段HTML代码、一段文本或者一个URL地址。当内容较长时,layer().open会自动根据内容的高度来调整弹窗的高度,确保内容的完整显示。 如果页面内容高度小于浏览器窗口的高度,弹窗的高度会自动调整为与内容高度相同。如果内容高度大于浏览器窗口的高度,弹窗的高度会自动调整为与浏览器窗口高度相同,并在内容区域上方和下方添加滚动条,以便用户能够滚动查看完整的内容。 通过使用layer().open的高度自适应功能,可以在弹窗中显示各种类型的内容,并确保内容的完整展示,提升用户体验。无论是显示图片、文本还是其他类型的内容,layer().open都可以根据内容的高度来自动调整弹窗的高度,从而确保内容的展示效果。 总而言之,layer().open具有高度自适应的特性,可以根据内容的高度来调整弹窗的高度,确保内容的完整显示,并提供良好的用户体验。 ### 回答3: layer().open高度自适应是指弹窗的高度会根据内容的多少自动调整,不会出现内容溢出或留白的情况。 在使用layer弹窗插件时,如果在.open()方法中不指定高度参数,那么弹窗的高度将会自适应内容的高度layer().open({content: '弹窗内容'}); 上述代码中,由于没有指定高度参数,弹窗的高度会根据内容的多少自动调整。 例如,如果内容较多,弹窗的高度会增加以容纳全部内容,如果内容较少,弹窗的高度会减小以节省空间。 这样做的好处是可以确保弹窗总是能够完整展示内容,不会出现内容被截断或者出现滚动条的情况。 总之,layer().open高度自适应功能可以提升用户体验,让弹窗更加美观和易用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值