解决layer弹出层自适应页面大小的问题

前两天在Vue中引入了Vue-layer插件，实现了弹出层效果。不过由于是在22寸屏下开发的，没多想，弹出层的area的长宽就设定的都是800px，效果还很好。结果那给用户看，他们是12寸的笔记本。弹出层直接撑爆了页面，无法关闭。。。

网上的解决方案大都是以下几种：

1、改成百分比形式。有bug，下面细说。

2、改成em，rem等。同上

3、采用area：auto。可能是因为采用了swiper的原因吧，这样设置会导致弹出层出现“顶天立地”的效果

4、采用iframeAuto。这个没太搞懂怎么用，而且网上查的资料，很多人都反映不能用。

5、根据当前页面高度计算好以后，再填入高度。这应该是最优解，但是有点麻烦。

尝试了很多办法，都无法实现想要的效果，最后没办法，只能去研究为什么百分比和rem这种形式会有bug。

这个bug的效果是，虽然弹出窗按比例展示了，但是里面包含的一个div的由于高度很小，导致看不到任何内容。查看网页代码，很容易就找到出问题的所在，这个div的height只有50px，不知道怎么会这样。

估摸着应该是js文件计算高度是出错了。这个div的id是vlip1545899541487，猜测应该是一个固定前缀加了随机数。只查找vlip，在vue-layer.js中果然找到了相应的代码

id:"vlip"+(new Date).getTime()

id是vlip加时间戳生成的，然后再往后看，就会发现问题所在

{return{height:parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}

直接去area的第二个参数转成int值减去50再加上后缀“px”，所以假如我们配了80%的高度，最终的height只有30px。。。

所以只要把这里的生成代码略加改动就好。

{return{height:this.options.area[1].indexOf("%")>=0?"90%":parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}

增加三目运算符，判断如果包含%的话，就写死一个值90%。其实这样不算完美，因为不同尺寸的显示屏，90%所展示的效果都不太一样。但是这样比较省事。

以上这篇解决layer弹出层自适应页面大小的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layer.open弹层查看缩略图的原图,自适应大小的实例

    很多时候需要查看缩略图的原图,那么layer.open是一个不错的选择 直接上代码 //查看原图 function showImg(url){ //alert(url); var img_infor = "<img src='" + url + "' />"; layer.open({ type: 1, closeBtn: 1, shade: false, title: false, //不显示标题 //skin: 'layui-layer-nobg',

  • 解决layer弹出层自适应页面大小的问题

    前两天在Vue中引入了Vue-layer插件,实现了弹出层效果.不过由于是在22寸屏下开发的,没多想,弹出层的area的长宽就设定的都是800px,效果还很好.结果那给用户看,他们是12寸的笔记本.弹出层直接撑爆了页面,无法关闭... 网上的解决方案大都是以下几种: 1.改成百分比形式.有bug,下面细说. 2.改成em,rem等.同上 3.采用area:auto.可能是因为采用了swiper的原因吧,这样设置会导致弹出层出现"顶天立地"的效果 4.采用iframeAuto.这个没太搞

  • 解决layer弹出层的内容页点击按钮跳转到新的页面问题

    在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面. 导入页按钮: <button type="button" id="start" class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>导入</i></button> 导入按钮的点击事件,点击后会

  • 解决layer弹出层中表单不起作用的问题

    如下所示: var html = '<form class="layui-form" action="">' + '<div class="layui-form-item"><label class="layui-form-label">角色名</label><div class="layui-input-block"><input type

  • 解决layer弹出层msg的文字不显示的问题

    今天在做项目的时候,做了一个弹出层,需要提示,就写了一个 layer.msg('雅蠛蝶 O.o', { icon: 6 ,btn: ['嗷','嗷','嗷'] }); 可是结果却是这样的 雅蠛蝶看不见 查了好久,才知道是我代码的css设定了文字是白色,所以看不见.因为没有找到修改msg背景的办法,所以可以根本文字的颜色 layer.msg('<a style='color:red'>雅蠛蝶 O.o</a>', { icon: 6 ,btn: ['嗷','嗷','嗷'] }); 以上

  • layer弹出层自适应高度,垂直水平居中的实现

    1.高度自适应: success: function(layero, index) { layer.iframeAuto(index); }, 2.layer垂直居中 进入layer.js,增加几行代码.具体如图: 以上这篇layer弹出层自适应高度,垂直水平居中的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layer弹出层父子页面事件相互调用方法

    // 父页面 <body> <a data-url="bbbb.html" id="parentIframe">小小提示层</a> <input id="shuzhi" /> <button class="but_par">父页面</button> </body> <script src="../jquery-1.9.1.min

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

    layer弹出窗口在弹出时指定了area,弹出后,如果当前页面(iframe)大小比弹出的窗口小,那么就会出现无法操作弹出窗口的尴尬情况. 如图: 弹出窗口比当前页面大,这时,唯有放大整个页面才能看到完全的弹出窗口,才可以操作. layui 为我们提供了 layer.style(); 方法来重新跳整窗口的大小 , 然后我们只需要写一个函数,得到当前document的宽度和高度, 判断弹出框是否大于document来调整窗口大小 <!DOCTYPE html> <html lang=&qu

  • 在layui中layer弹出层点击事件无效的解决方法

    1.click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事 件的 2.而(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件不起作用:(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元

  • jQuery Layer弹出层传值到父页面的实现代码

    jQuery Layer弹出层传值到父页面的实现代码

    目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).ready(function(){ //添加任务弹出层 addTask(); }); //弹出层 function addTask(){ $('[data-id="addList"]').on('click', function(){ layer.open({ type: 2,title:

  • Layer弹出层动态获取数据的方法

    前一阵子做了一个简单的小项目,用到了Layer弹出层(弹出层的用法就不多加赘述了,官网上都有详细的介绍,这里附上网址http://layer.layui.com/),当时前后台合页面的时候就出现了一个问题,弹出层总是获取不到数据,不过后面还是和同学们一起解决了,希望能帮助到大家. 之前的代码: <a id="func11" onclick="func11();">点击查看</a> function func11() { console.log

随机推荐