用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

 

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