码迷,mamicode.com
首页 > 其他好文 > 详细

layui弹出层layer过大被遮挡解决办法-resize事件自动调整

时间:2018-03-09 10:43:57      阅读:2597      评论:0      收藏:0      [点我收藏+]

标签:ant   好的   搜索引擎   data   win   button   str   cti   方法   

遇到的问题

??最近在使用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做项目,前端也不熟悉,只有先这样解决了,各位有好的方法欢迎留言,谢谢!

layui弹出层layer过大被遮挡解决办法-resize事件自动调整

标签:ant   好的   搜索引擎   data   win   button   str   cti   方法   

原文地址:https://www.cnblogs.com/kstrive/p/8531945.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!