layui弹出层根据浏览器大小选择弹出层大小

版权声明:本文为博主原创文章,未经博主允许不可转载。转载请注明出处 https://blog.csdn.net/qq_32442967/article/details/84023647

layui弹出层根据屏幕大小选择弹出层大小

//弹出层方法
layer.open({
    title: '明细',
    type: 2,
    content: 'detail.html,
    area: screen() < 2 ? ['90%', '80%'] : ['1280px', '720px'], 
});

//判断浏览器大小方法
function screen() {
    //获取当前窗口的宽度
    var width = $(window).width();
    if (width > 1200) {
        return 3;   //大屏幕
    } else if (width > 992) {
        return 2;   //中屏幕
    } else if (width > 768) {
        return 1;   //小屏幕
    } else {
        return 0;   //超小屏幕
    }
}

相关知识点:
1.$(window).width()与window.innerWidth

(1)$(window).width()需要引用jquery.js文件,它是jquery方法。而window.innerWidth是js方法,不需要引用jquery.js文件。
(2)  window.innerWidth获取当前窗口的宽度(包含滚动条),$(window).width()获取当前窗口的宽度(不包含滚动条)。
(3)  window.innerWidth在IE8浏览器是无效的。
  1. layui.open()中的area
area: screen() < 2 ? ['90%', '80%'] : ['1280px', '720px'], 

猜你喜欢

转载自blog.csdn.net/qq_32442967/article/details/84023647
今日推荐