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. Unexpected EOF in archive 或者 rmtlseek not stopped at a record boundary

    多半都是文件在传输.复制的时候,发生了损坏: 尽量cp不要用mv 其次,注意文件的大小:

  2. SQL注入中的WAF绕过

    1.大小写绕过 这个大家都很熟悉,对于一些太垃圾的WAF效果显著,比如拦截了union,那就使用Union UnIoN等等绕过. 2.简单编码绕过 比如WAF检测关键字,那么我们让他检测不到就可以了. ...

  3. js动画--链式运动

    前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...

  4. Graylog-centos安装

    graylog安装 1.先决条件 yum install java-1.8.0-openjdk-headless.x86_64 -y #安装java软件包 yum install epel-relea ...

  5. 前端知识--mulline框架，返回到前一个页面，并且刷新前一个页面

    最近在写项目的时候,遇到了这样一个问题,在第二页面修改完了数据之后,点击返回按钮的时候,第一个页面要返显出第一个页面的数据,这想想其实也不是很难,但是,难就难在,这两个页面是同时打开的.关闭了一个页面 ...

  6. 一种动态的样式语言--Less 之 命名空间

    LESS 命名空间 如果想更好的组织CSS或者单纯是为了更好的封闭,将一些变量或者混合模块打包起来,你像下面这样在#bundle中定义一些属性集之后可以重复使用: #bundle{ .button() ...

  7. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)

    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...

  8. python函数 | 生成器

    生成器本质上是迭代器,包含__iter__和__next__功能 生成器的产生方式: 1,生成器函数构造. 2,生成器推导式构造. 3,数据类型的转化. 通过构造生成器函数,就是将函数中的return ...

  9. VMware空虚拟机通过网络安装系统时获取不到IP地址情况（基于Linux的DHCP服务器）

    当虚拟机提示no DHCP or proxyDHCP offers were received时 1.dhcp服务配置错误(留意句尾分号“  :”) 2.dhcp服务未启动(用 systemctl s ...

  10. artillery强大灵活的负载测试套件

    artillery是基于nodejs 编写的负载测试套件支持http&&socket.io&&websockets&&kinesis&& ...