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. (五)Kubernetes Pod状态和生命周期管理

    什么是Pod Pod是kubernetes中你可以创建和部署的最小也是最简的单位.Pod代表着集群中运行的进程. Pod中封装着应用的容器(有的情况下是好几个容器),存储.独立的网络IP,管理容器如何 ...

  2. 实验十四：团队项目评审&课程学习总结

    项目 内容 作业所属课程 所属课程 作业要求 作业要求 课程学习目标 (1)掌握软件项目评审会流程:(2)反思总结课程学习内容 任务一:团队项目审核已完成.项目验收过程意见表已上交. 任务二:课程学习 ...

  3. Nginx——配置文件服务下载

    前言 只是临时搭建的一个下载服务,所以就直接用nginx来咯 步骤 解析域名 将域名解析到要部署应用对应的服务器,就是个解析操作,没啥好讲的 创建目录 # mkdir /data/install/ 配 ...

  4. scala中可以执行外部命令Process

    后续用到在总结 Process(s"hadoop fs -rm -r ${path}").!!

  5. 如何保护你的 Python 代码 （一）—— 现有加密方案

    https://zhuanlan.zhihu.com/p/54296517 0 前言 去年11月在PyCon China 2018 杭州站分享了 Python 源码加密,讲述了如何通过修改 Pytho ...

  6. Redis主从复制之哨兵模式(sentinel)

    介绍:反客为主的自动版,能够后台监控主机是否故障,如果故障了根据投票数自动将从库转换为主库 调整结构:6379带着80.81 自定义的/myredis目录下新建sentinel.conf文件,名字绝不 ...

  7. [译] 2017 年比较 Angular、React、Vue 三剑客

    原文地址:Angular vs. React vs. Vue: A 2017 comparison 原文作者:Jens Neuhaus 译文出自:掘金翻译计划 本文永久链接:github.com/xi ...

  8. haproxy 2.0 dataplaneapi rest api 转为graphql docker 镜像

    为了方便直接使用haproxy dataplaneapi graphql 格式的查询,制作了一个简单的docker 镜像 基于dotenv 进行配置管理,可以直接通过环境变量传入参数,处理不同hapr ...

  9. 钠 GZY整理贪心

    目录 CF140C New Year Snowmen CF161B Discounts P1842 奶牛玩杂技 CF140C New Year Snowmen #include <bits/st ...

  10. 【JZOJ6232】【20190625】喜欢最最痛

    题目 \(n\)个节点的树,边权为正整数. 从1 号点开始走一个路径并最终回到 1 号点,且这条路径经过了所有的边. 一条路径的代价就是它经过的边的边权之和. 可以加若干条额外边,第 i 条加的额外边 ...