解决layui弹出层layer的area过大被遮挡的问题


Posted in Javascript onSeptember 21, 2019

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

如图:

解决layui弹出层layer的area过大被遮挡的问题

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

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" rel="external nofollow" 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过大被遮挡的问题

以上这篇解决layui弹出层layer的area过大被遮挡的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
关于layui flow loading占位图的实现方法
Sep 21 #Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 #Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 #Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 #Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 #Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 #Javascript
Vue登录主页动态背景短视频制作
Sep 21 #Javascript
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python实现根据文件格式分类
2019/10/31 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
什么是python的必选参数
2020/06/21 Python
Python Django路径配置实现过程解析
2020/11/05 Python
中国高端家电购物商城:顺电
2018/03/04 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
Python的两道面试题
2013/06/29 面试题
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
精彩的广告词
2014/03/19 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
领导欢迎词致辞
2015/01/23 职场文书
总经理岗位职责
2015/02/04 职场文书
离婚起诉书范本
2015/05/18 职场文书
学生退学证明
2015/06/23 职场文书
董事长年会致辞
2015/07/29 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers