用layer.load做一个ajax提交时候的遮罩层

 

*** 实现目标：就是在ajax提交中，还没返回结果的时候，给一个遮罩层，有一个 '正在处理' 的效果！

 

layer.load(2, {
    shade: [0.5, '#000'],
    content: '正在处理, 请稍后...',
    success: function (layero) {
        layero.find('.layui-layer-content').css({
            'paddingTop': '40px',
            'textAlign': 'center',
            'backgroundPositionX': 'center',
            'color': '#fff',
            'fontSize': '16px',
            'fontWeight': '700',
            'letterSpacing': '2px'
        });
    }
});

 

初步放入页面运行效果如图：

 

这个显然是没有达到预期效果，一看是CSS样式有问题 ，果断去找源码。

 

经过一番查找，通过定位文件以及CSS类，得到如下线索：

文件 layer/theme/default/layer.css 中 找到这个：.layui-layer-ico16,.layui-layer-loading .layui-layer-loading2

看到默认是 32px，这显然有点窄了，调成 200px 试试。

 

 

果然，实现了想要的效果！

 

*** 参考博客：

https://my.oschina.net/htgylzhq/blog/1585358

 

*** 最后提醒大家，出行戴口罩！