解决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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
关于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
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
python新手学习可变和不可变对象
2020/06/11 Python
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
总经理司机岗位职责
2014/02/06 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
公司费用报销管理制度
2015/08/04 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书