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

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

时间: 2024-11-05 13:28:47

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

layer/layui弹出层插件bug

<button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn" type="submit">立即提交</button> 使用layer/layui弹出层插件,type="submit"时,弹出层失效,改为type="button"时正常弹出;

模拟layui弹出层

以前觉得自己手写一个类似layui的弹出层是挺遥远的事,因为完全没有头绪,即便在layui官网知道layui使用的都是C3动画 之前试过控制width:0;height:0来做动画,结果惨不忍睹,直到几天前灵机一动联想到了tranform的scale属性,才稍微触及到了皮毛 为了不添加格外的HTML结构,所以弹出层也是动态生成 layui弹出框和遮罩层是同级结构,而我把弹出框放遮罩层里了,所以关闭时要用animationend来监听,弹出框做完动画后才删除遮罩层 确认框confirm之前也想跟原

[Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决办法

Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完成后才会隐藏(display:none).有些奇葩手机就是不一样. 解决办法就是禁用消息框的动画: 方法一: 在app.js的launch方法里面加上 Ext.Msg.defaultAllowedConfig.showAnimation = false Ext.Msg.defaultAllowedConfig.hideAnimation = false

layui弹出层

利用layui框架layer部分执行的弹出层,这样比起普通alert的弹出层更美观 首先,写一个按钮 <button class='btn'>点击试试</button> js部分 $(document).ready(function () { $('.btn').on('click', function () { layer.confirm('你好吗?', { btn: ['好', '不好'] }, function () { layer.msg('hao', { icon: 1

弹出层layer.msg第一次提示会很长

最近在使用layer弹出层时候发现第一次提示,layer.msg会显得很长. 解决方案: 1 layui.use('layer', function() { 2 var layer = layui.layer; 3 layer.ready(function(){ 4 layer.msg('添加成功!'); 5 }); 6 }); 原文地址:https://www.cnblogs.com/yapin/p/11795795.html

layui弹出层type=2无法正常验证问题

思路:在弹出层页面form表单中增加一个隐藏的提交按钮,当弹出层点击确定按钮时,触发弹出层页面中的隐藏按钮,触发提交校验 弹出层脚本如下: function LoadDemo(id) { layer.open({ title: '弹出层标题', //弹出层标题 type: 2, content: 'demo.shtml', btn: ['确定', '关闭'], area: ["650px", "550px"], success: function (layero,

LAYUI弹出层详解

今天空了学习一下弹出层 还是一步步展示把 首先,layer可以独立使用,也可以通过Layui模块化使用.我个人一直是用的模块化的 所以下面素有的都是基于模块化的. 引入好相关文件就可以开始啦  今天放图片把 试着学一下放图片 1.最简单的弹层,这个弹层的效果其实就是一个加了特效和样式的alert();代码如下: <script>layui.use("layer", function () {var layer = layui.layer;layer.msg("大家

jQuery弹出层layer插件的使用

引入插件layer 触发弹出层的按钮/链接 <a href="javascript:showPop();"> <img src="" /> </a> 弹出层内容 <div style="display: none"> <div id="attention" style="text-align:left;max-height:5rem;overflow-y:scro

layer弹出层 layer源码

下载源码:点击下载 ;!function(window, undefined){ "use strict"; var pathType = true, //是否采用自动获取绝对路径.false:将采用下述变量中的配置 pathUrl = 'lily/lib/layer/', //上述变量为false才有效,当前layerjs所在目录(不用填写host,相对站点的根目录即可). $, win, ready = { hosts: (function(){ var dk = location