资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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

小编给大家分享一下如何解决layui弹出层layer中area过大被遮挡的问题，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

10多年的同德网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整同德建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“同德网站设计”,“同德网站推广”以来，每个客户项目都认真落实执行。

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

如图：

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

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

layui 为我们提供了 layer.style(); 方法来重新跳整窗口的大小 , 然后我们只需要写一个函数,得到当前document的宽度和高度, 判断弹出框是否大于document来调整窗口大小




 
 Title
 


点击


 
  单行输入框
  
   
  
 
    验证必填项          
          验证手机                       验证邮箱                    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   });  }

效果图：

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

以上是“如何解决layui弹出层layer中area过大被遮挡的问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


分享文章：如何解决layui弹出层layer中area过大被遮挡的问题
转载来于：http://cdkjz.cn/article/pcojej.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
抖音短视频拍摄定制网站企业网站建设大足网站建设青羊总部基地德阳电信机房成都服务器托管成都搅拌罐车画册设计制作wap手机网站

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图