老蔡的个人专栏正式成立,以后工作中遇到的技术问题,或者生活中对一些事物的见解,都会和大家分享!独乐乐不如众乐乐!

layer.js 弹层样式有误 jquery datatables表格宽度无法撑开

WEB前端 BlandonTsai 3406℃ 0评论

在处理后台管理系统的时候,接触到了一种新型 UI : Layer.js。使用起来非常的顺手,页面特效也是相当的丰富,推荐给广大的前端工程师。

现在来观赏一下美观的后台UI,我不得不承认这是有史以来见过的最以漂亮的后台UI:

后台UI

操作项中有一个 layer 的弹层操作:

看过 layer 的官方API就知道,这是个全屏弹层的操作,可是弹出来后的页面第一次的效果是正常的,第二次就会变成下面这样:

jquery datatables 表格样式异常

layer 非全屏弹层

我测试了好多次,没发现具体的解决办法,好像跟配置也没有多大的关系,十分有可能是页面的样式冲突了。

后台其他地方的弹层操作也有不少,但样式都是正常的。我比对了一下,发现了一个共性:它们都是非全屏弹层。然后我调整了一下弹层代码:

把目标页面弹出固定宽高的层,这样的话页面显示效果是正常的。有遇到类似问题的朋友,可以参考一下吧。

至于那个全屏弹层样式异常的问题,有知道根源的童鞋可以在下方留言,分享一下成果,独乐乐不如众乐乐嘛!

转载请注明:似水流年 » layer.js 弹层样式有误 jquery datatables表格宽度无法撑开

如果觉得文章还不错,欢迎打赏
喜欢 (0)or分享 (0)
BlandonTsai
发表我的评论
取消评论


(2)个小伙伴在吐槽
  1. 头像
    这的确是个问题,我在type=2,下面加了一个area: ['100%','100%'],效果可以有了
    匿名2017-01-13 17:15 回复
    • BlandonTsai
      不过type=2类型就是全屏的方式,至于area的额外定义我还真没有试过, :write: 我下去试试
      BlandonTsai2017-01-13 21:39 回复