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

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

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

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

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

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

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

 

posted @ 2020-04-21 10:21  moppet蔡蔡  阅读(1057)  评论(0编辑  收藏  举报