layer弹出窗口在弹出时指定了area，弹出后，如果当前页面（iframe）大小比弹出的窗口小，那么就会出现无法操作弹出窗口的尴尬情况。如图:

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

layui 为我们提供了 layer.style(); 方法来重新跳整窗口的大小 , 然后我们只需要写一个函数,得到当前document的宽度和高度, 判断弹出框是否大于document来调整窗口大小

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="layui/css/layui.css" media="all">

</head>

<body>

<button id="dianji">点击</button>

<form class="layui-form" action="" id="id">

    <div class="layui-form-item">

        <label class="layui-form-label">单行输入框</label>

        <div class="layui-input-block">

            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"

                   class="layui-input">

        </div>

    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">验证必填项</label>

        <div class="layui-input-block">

            <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入"

                   autocomplete="off" class="layui-input">

        </div>

    </div>

    <div class="layui-form-item">

        <div class="layui-inline">

            <label class="layui-form-label">验证手机</label>

            <div class="layui-input-inline">

                <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">

            </div>

        </div>

        <div class="layui-inline">

            <label class="layui-form-label">验证邮箱</label>

            <div class="layui-input-inline">

                <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">

            </div>

        </div>

    </div>

</form>

<script src="layui/layui.all.js"></script>

<script type="text/javascript">

    var layerIndex;

    var layerInitWidth;

    var layerInitHeight;

    var $;

    layui.use(['form', 'jquery'], function () {

        var form = layui.form;

        $ = layui.jquery;

        $("#dianji").click(function () {

            layer.open({

                type: 1,

                area: ['500px', '900px'],

                content: $('#id'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响

                btn: ['按钮一', '按钮二', '按钮三']

                , yes: function (index, layero) {

                    //按钮【按钮一】的回调

                }

                , btn2: function (index, layero) {

                    //按钮【按钮二】的回调

                    //return false 开启该代码可禁止点击该按钮关闭

                }

                , btn3: function (index, layero) {

                    //按钮【按钮三】的回调

                    //return false 开启该代码可禁止点击该按钮关闭

                }

                , cancel: function () {

                    //右上角关闭回调

                    //return false 开启该代码可禁止点击该按钮关闭

                },

                success: function (layero, index) {

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

                    layerIndex = index;

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

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

                    resizeLayer(layerIndex, layerInitWidth, layerInitHeight);

                    form.render();

                }

            });

        })

    });

    function resizeLayer(layerIndex, layerInitWidth, layerInitHeight) {

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

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

        var minWidth = layerInitWidth > windowWidth ? windowWidth : layerInitWidth;

        var minHeight = layerInitHeight > windowHeight ? windowHeight : layerInitHeight;

        console.log("win:", windowWidth, windowHeight);

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

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

        layer.style(layerIndex, {

            top: 0,

            width: minWidth,

            height: minHeight

        });

    }

</script>

</body>

</html>

效果图:

layui弹出层layer的area过大被遮挡的更多相关文章

  1. layui 弹出层layer中from初始化 ,并在btn中返回from.data

    1.弹出对话框 layer.open() 来初始化弹层 // 监听添加操作 $(".data-add-btn").on("click", function () ...

  2. Layui 弹出层组件——layer的模块化开发实例应用

    Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...

  3. layer/layui弹出层插件bug

    <button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...

  4. 弹出层layer的使用

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

  5. layui弹出层之应用实例讲解

    从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...

  6. layui弹出层处理（获取、操作弹出层数据等）

    要点: 字符串被渲染为弹窗层之后,回自动转换为DOM,可以使用jq进行各种操作 <!DOCTYPE html> <html> <head> <meta cha ...

  7. layui弹出层回调的使用

    <%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ in ...

  8. Layui弹出层、日期和时间选择、即时通讯、分页

    Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...

  9. web 前端常用组件【07】弹出层 Layer

    web 项目中总是需要弹出框,来让用户进行下一步的操作. 大到弹出另外一个页面,小到弹出提示.确认等. 经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感 ...

随机推荐

  1. Odoo日历视图详解

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826148.html 一:日历视图定义 根元素为<calendar>. 主要的属性有:    ...

  2. Linux运维技术之scp命令使用

    命令格式: scp -P 8031  -r 路径1 路径2 命令解释, 其中-P中的P一定要大写,小写不行(这个也是问题的关键,这个大小写耽搁了好长时间) -P 2424表示更改SSH端口后的端口,如 ...

  3. elasticsearch使用ansj分词器

    目前elasticsearch的版本已经更新到7.0以上了,不过由于客户需要5.2.2版本的elasticsearch,所以还是需要安装的,并且安装上ansj分词器.在部署ES的时候,采用容器的方式进 ...

  4. 一款信息收集工具-theHarvester

    用法: theHarvester -d 163.com -l 1000 -b baidutheHarvester -d 163.com -l 1000 -b google -d 后跟服务器域名     ...

  5. Android adb连接后adb devices显示unauthorized解决办法

    adb链接手机后,显示unauthorized.原因是命令所在目录不对,这个adb devices命令是在夜神模拟器目录下执行的,所以出现该问题,切换目录后解决: 如果切换目录后仍然不行:重启adb. ...

  6. js动画---一个小bug的处理

    对于前面的课程,大家似乎看不出来存在什么问题,一切都很顺利,但是其实是存在一个很大的bug的,这个bug是什么呢?? 我们来看看下面这个程序就知道了 <!DOCTYPE html> < ...

  7. org.apache.ibatis.exceptions.PersistenceException:

    org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: java.lang.Ill ...

  8. python基础语法6 名称空间与作用域

    目录: 1.函数对象 2.函数嵌套 3.名称空间 4.作用域 函数是第一类对象 1.函数名是可以被引用: def index(): print('from index') a = index a() ...

  9. POJ3259-Wormholes-( spfa || Bellman_Ford )

    题意:有n块田,之间有m条无向边表示路径,权值表示走过需要花费的时间.有w对虫洞,虫洞是单向的,表示穿越一定时间到过去,并且回到虫洞指向的点,问一个人有没有可能通过虫洞回到某个起点,并且在从这个起点出 ...

  10. [Javascript] ES6 Class Constructors and the Super Keyword

    When the ES6 class shipped back in 2015, a number of additional keywords came with it. Two of these ...