layui加载层（有文字提示版）跳出iframe父级

项目后台有个导入表格功能，数据量大所以想有个提示（文字版）且界面定住无法操作知道加载成功

layui的加载层一共有四种样式：

默认效果--风格2-风格3-风格4-打酱油参与链接：https://layer.layui.com/

<script>
//加载层-默认风格
layer.load();
//此处演示关闭
setTimeout(function(){
  layer.closeAll('loading');
}, 2000);
//加载层-风格2

layer.load(1);
//此处演示关闭
setTimeout(function(){
  layer.closeAll('loading');
}, 2000);
//加载层-风格3

layer.load(2);
//此处演示关闭
setTimeout(function(){
  layer.closeAll('loading');
}, 2000);
//加载层-风格4

layer.msg('加载中', {
  icon: 16
  ,shade: 0.01
});
//打酱油

layer.msg('尼玛，打个酱油', {icon: 4});
</script>

在文件上传的地方，使用加载层

<script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        //普通上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '{SITE_URL}man.php?s=students&c=home&m=eimport_formal'//换成自己的路径
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                //加载层第3种风格
                layer.load(2, {
                    shade: [0.8,'#000'],
                    shadeClose : false
                }); //上传loading

                //加载层第3种风格
                layer.msg('正在处理请稍后', {
                    icon: 16
                    ,shade: [0.3,'#fff']
　　　　　　　　　　　　，time:flase
　　　　　　　　　　　　//在后面执行的方法中，发现加载层消失后有一段时间间隔。故用到了time这个参数
                });

            }
            ,accept: 'file' //普通文件
            ,exts: 'xls|xlsx' //文件类型
            ,done: function(res) {
                layer.closeAll('loading'); //关闭loading
            }
            ,error: function(){
                layer.closeAll('loading'); //关闭loading
            }
        });
    });
</script>

因为是子框架用到了layer的加载层，但是还是父级也要盖住。故用到了以下几个参数：

parent.layer.load：在父级进行弹出

parent.layer.close(index)：关闭父级弹窗

layer.closeAll(type) - 关闭所有层

具体可以参考：http://www.xiaoshu168.com/jquery/148.html

扫描二维码关注公众号，回复： 11003752 查看本文章

layer.closeAll(); //疯狂模式，关闭所有层

layer.closeAll('dialog'); //关闭信息框

layer.closeAll('page'); //关闭所有页面层

layer.closeAll('iframe'); //关闭所有的iframe层

layer.closeAll('loading'); //关闭加载层

layer.closeAll('tips'); //关闭所有的tips层

layui加载层（有文字提示版）跳出iframe父级

猜你喜欢