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. zabbix--4.0源码安装

    Zabbix4.0 源码编译安装 ps:其实相对 zabbix 来说,直接按照官网 yum 安装还是要方便点,我这里已经有 lnmp 的环境了,就想自己编译安装试下. 官网yum安装中文文档:http ...

  2. MATLAB 下GUI的学习

    做界面,然后在对应程序里做调用. 0.打开文件:命令行输入 guide 或者 新建——图形用户界面1.文件-预设可以对字体.代码等进行设置.2.工具-GUI选项可以改变行为大小. 3,添加轴,面板,按 ...

  3. del_deploy.core.prefs.bat

    cd /d "D:\Workspaces\MyEclipse 10" del ".metadata\.plugins\org.eclipse.core.runtime\. ...

  4. JSP学习之路

    1.JSP默认Encoding编码格式设置:UTF-8

  5. RabbitMQ简单介绍+Windows环境安装

    文章目录 1.RabbitMQ简介2.RabbitMQ与其他MQ有什么不同3.RabbitMQ环境安装3.1 安装erlang3.2 安装rabbitmq-server4. RabbitMQ管理平台介 ...

  6. [ARC064F] Rotated Palindromes

    题意 给定一个整数N,请你求出有多少字符集为1到K之间整数的字符串,使得该字符串可以由一个长度为N的回文串循环移位后得到.所谓循环移位,就是把字符串的某个前缀(可以为空)移到字符串末尾,如" ...

  7. 验证码破解 | Selenium模拟登陆12306

    12306官网登录的验证码破解比较简单,验证码是常规的点触类型验证码,使用超级鹰识别率比较高. 思路: (1)webdriver打开浏览器: (2)先对整个屏幕截屏,通过标签定位找到验证码图片,并定位 ...

  8. /proc文件系统的特点和/proc文件的说明

    /proc文件系统是一种特殊的.由软件创建的文件系统,内核使用它向外界导出信息,/proc系统只存在内存当中,而不占用外存空间. /proc下面的每个文件都绑定于一个内核函数,用户读取文件时,该函数动 ...

  9. shell 命令行参数（getopt和getopts）

    getopt 命令 使用getopt命令,可以解析任何命令行选项和参数,但是用法比较复杂.getopt的命令用法如下: $ getopt --help 用法: getopt optstring par ...

  10. 为 Nginx 添加 HTTP 基本认证(HTTP Basic Authentication)

    针对sudo apt-get install命令安装的nginx(默认会有/etc/nginx/conf.d) sudo apt-get install nginx 生成密码 printf " ...