layui的弹出层如何自适应屏幕大小?
Posted 遇见Time
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui的弹出层如何自适应屏幕大小?相关的知识,希望对你有一定的参考价值。
天干物燥,话不多说,直接上代码。
第一步,定义一个变量daxiao,定义函数screen。
第二步,在layer.open中的area属性中对daxiao进行判断。
<script>
var daxiao=9;
function screen() {
//获取当前窗口的宽度
var width = $(window).width();
if (width > 1200) {
return daxiao=3; //大屏幕
} else if (width > 992) {
return daxiao=2; //中屏幕
} else if (width > 768) {
return daxiao=1; //小屏幕
} else {
return daxiao=0; //超小屏幕
}
}
screen();
layer.open({
type: 2,
title: '<i class=iconfont></i>编辑',
area: daxiao < 2 ? ['90%', '43%'] : ['500px', '300px'], //这里引用变量daxiao
content: ['{:url("Spjk/edit")}?id=' + data.id, 'yes'],
skin: 'layui-layer-molv',
btn: ['立即提交', '取消'],
btnAlign: 'c',
yes: function(index, layero){
var submit = layero.find('iframe').contents().find("#submit");
submit.click();
return false;
},
btn2:function (index,layero) {
layer.close(index);
}
});
</script>
以上是关于layui的弹出层如何自适应屏幕大小?的主要内容,如果未能解决你的问题,请参考以下文章