使用layui彈出層的心得,解決使用layer iframe 沒有出現滾動條 導致頁面顯示不全
阿新 • • 發佈:2019-02-12
問題描述:在做後臺的時候想要實現這樣一個功能,點選彈出一個視窗,視窗是下拉選擇框,給使用者選擇。用到了layui,但是卻發現,彈窗雖然固定了高寬,但是裡面的下拉框,在顯示的時候卻被彈窗擋住了,導致資訊顯示不全,也沒滾動條。
layer.open({ id:'edit', type: 2, title: '修改裝置資訊', content: '/action/device-update?id=' + data.id, shadeClose: true, //點選遮罩關閉 area: ['550px', '550px'], btn: ['確定', '取消'], yes: function (index, layero) { var body = layer.getChildFrame('body', index).contents().serialize(); //巧妙的地方在這裡哦 update(body,table,_cur_page,index); } });
導致新增頁面如下圖:
資訊顯示不全,右側沒有滾動條
後來一直百度和查詢layui官方文件,發現官方文件也沒有直接的解決方法。
其實解決辦法倒是想出來一個,就是自己把body體padding設定一下。
但是通過琢磨和研究之後,才知道其實是layui樣式設定的問題。
後來研究才知道在layui內部樣式中,對.layui-layer-content定義了overflow屬性且為hidden,只要取消這個屬性,就不存在遮擋問題。
關於overflow:
所以解決辦法可以去掉自己頁面中的body體中的class="layui-layout-body"即可,因為正如上面所述,layui的layui-body樣式是overflow:hidden截取了
解決之後的效果圖如:
如上圖所示,就會出現滾動條了。