如何解决layui弹出层layer中area过大被遮挡的问题-创新互联-成都快上网建站

快上网建站品牌

13518219792

如何解决layui弹出层layer中area过大被遮挡的问题-创新互联

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

成都创新互联公司是一家集网站建设,尼玛企业网站建设,尼玛品牌网站建设,网站定制,尼玛网站建设报价,网络营销,网络优化,尼玛网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

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://kswjz.com/article/dcgdhh.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯

行业动态

企业网站建设的重要性！

现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...

服务项目

联系吧 在百度地图上找到我们

电话：13518219792

如遇占线或暂未接听请拨：136xxx98888

业务咨询 技术咨询 售后服务
网站设计
网站设计
高端网站设计
外贸网站设计方案
成都网站设计
网站制作
成都网站制作
达州网站制作
成都网站制作
网站制作
联系我们
电话：13518219792
邮箱：631063699@qq.com
地址：成都青羊区锦天国际1002号
网址：www.kswjz.com
网站建设
定制网站建设多少钱
成都网站建设
校园网站建设方案
成都网站建设

微信二维码

Copyright © 2002-2023 www.kswjz.com 快上网建站品牌 QQ：244261566 版权所有 备案号：蜀ICP备19037934号