layui 数据表格内容过长遮挡_layui弹出层layer过大被遮挡解决办法-resize事件自动调整...

遇到的问题

最近在使用layui做一个管理系统,由于前端技术有限,在开发过程中也遇到这样那样的问题,即比较简单的问题有时也要搞半天。。

layer弹出窗口在弹出时指定了area,弹出后,如果当前页面(iframe)大小比弹出的窗口小,那么就会出现无法操作弹出窗口的尴尬情况。查看官方文档以及搜索引擎,都没有找到好的办法。如图所示:

弹出窗口比当前页面大

这时,唯有放大整个页面才能看到完全的弹出窗口,才可以操作。

我的尝试

我的思路时通过监听页面的resize事件,通过layer.style(layerIndex, {})重新设置弹出窗口的大小和位置。

1、定义页面变量

var layerIndex;

var layerInitWidth;

var layerInitHeight;

2、在layer.open的完成事件中获取窗口初始大小及窗口索引

在success方法中取得相关值:

//获取当前弹出窗口的索引及初始大小

layerIndex = index;

layerInitWidth = $("#layui-layer"+layerIndex).width();

layerInitHeight = $("#layui-layer"+layerIndex).height();

//此处调用是因为,初始弹出窗口时,window也可能小于窗口,这里调用一次调整,resizeLayer为自定义的方法,后面给出

utils.resizeLayer(layerIndex,layerInitWidth,layerInitHeight);

完整片断:

laytpl($('#edit-tpl').html()).render(d,

function(html) {

layer.open({

type: 1,

title: '新增',

content: html,

maxmin: true,

area: ['800px', '690px'],

btn: ['提交', '重置', '取消'],

yes: function(index, layero) {

layerIndex = index;

$('form[lay-filter="form-edit"]').find('button[lay-submit]').click();

return false;

},

btn2: function(index, layero) {

layerIndex = index;

$('form[lay-filter="form-edit"]').find('button[type="reset"]').click();

return false;

},

success: function(layero, index) {

//获取当前弹出窗口的索引及初始大小

layerIndex = index;

layerInitWidth = $("#layui-layer"+layerIndex).width();

layerInitHeight = $("#layui-layer"+layerIndex).height();

//utils.resizeLayer(layerIndex,layerInitWidth,layerInitHeight);

form.render(null, 'form-edit');

}

});

});

3、监听window的resize事件,重新设置大小

监听window变化,调用resizeLayer方法重设置弹出窗口大小

$(window).resize(function() {

utils.resizeLayer(layerIndex,layerInitWidth,layerInitHeight);

});

4、重新设置函数

若window比窗口小,取小的值来设置弹出窗口的大小,因为多个页面都要调用,在此封装到utils中作为一个函数来调用

resizeLayer:function (layerIndex,layerInitWidth,layerInitHeight) {

var docWidth = $(document).width();

var docHeight = $(document).height();

var minWidth = layerInitWidth > docWidth ? docWidth : layerInitWidth;

var minHeight = layerInitHeight > docHeight ? docHeight : layerInitHeight;

console.log("doc:",docWidth,docHeight);

console.log("lay:",layerInitWidth,layerInitHeight);

console.log("min:",minWidth,minHeight);

layer.style(layerIndex, {

top:0,

width: minWidth,

height:minHeight

});

}

5、效果

初始时窗口比window小的情况,自动适应了

调整window大小,自动适应

window正常情况下,窗口使用原始设置的大小

总结

初学layui做项目,前端也不熟悉,只有先这样解决了,各位大神,有好的方法欢迎留言告诉,谢谢!

PS:首次使用markdown写第一博文,虽然耗费时间,但感觉挺好~

[java编程之旅]

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

凉风祭

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值