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. 第十周LINUX 学习笔记

    LVS集群nat丶DR HA:高可用    平均无故障时间/(平均无故障时间+平均修复时间)        负载均衡 次序lb(负载)——>ha()LB  tcp:lvs,haproxy  应用 ...

  2. C语言const和volatile关键字

    这部分内容比较简单,我这里直接先做总结,然后通过写三个测试代码,体会其中的关键点 一.总结      1.const使得变量具有只读属性(但是不一定就是不能更改) 2.const不能定义真正意义上的常 ...

  3. 项目Beta冲刺--1/7

    项目Beta冲刺--1/7 作业要求 这个作业属于哪个课程 软件工程1916-W(福州大学) 这个作业要求在哪里 项目Beta冲刺 团队名称 基于云的胜利冲锋队 项目名称 云评:高校学生成绩综合评估及 ...

  4. python应用-传入年月日 输出为一年的第几天

    ef leap_year(year): return (year//4==0 and year//100!=0) or (year //400==0) def which_day(year,month ...

  5. Zipkin 知识点

    在Spring Cloud D版本,zipkin-server通过引入依赖的方式构建工程,自从E版本之后,这一方式改变了,采用官方的jar形式启动. 出处:https://juejin.im/post ...

  6. 查看服务器被访问最大的ip

    网站有时会很卡,可以先看看哪些ip访问最多,一行命令就可以列出来,如下所示 netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c ...

  7. MySQL中的内连接、左连接、右连接、全连接、交叉连接

    创建两个表(a_table.b_table),两个表的关联字段分别为:a_table.a_id和b_table.b_id CREATE TABLE a_table ( a_id int NOT NUL ...

  8. Excel——读取——导出目录

    /** * 导出Excel文件到具体的目录 * <一句话功能简述> * <功能详细描述> * @param fileName 导出的文件名 * @param sheetName ...

  9. Java Excel 导入导出（一）

    本文主要描述通过java实现Excel导入导出 一.读写Excel三种常用方式 1.JXL——Java Excel开放源码项目:读取,创建,更新 2.POI——Apache POI ,提供API给Ja ...

  10. win10 系统运行加速方法

    win10系统就是不太好用,很多功能我们硬件跟不上,会拖累系统运行速度,之前将win10优化了一部点,但是有些地方反而降低运行速度,因此需要关闭:1.磁盘的优化,这个说实话,可以自己来优化,没必要时刻 ...