zoukankan      html  css  js  c++  java
  • 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层
  • 相关阅读:
    HackerRank
    HackerRank
    LeetCode "Kth Smallest Element in a BST"
    HackerRank
    HackerRank
    LeetCode "Roman to Integer"
    LeetCode "Integer to Roman"
    LeetCode "Majority Element II"
    HackerRank
    HackerRank
  • 原文地址:https://www.cnblogs.com/moppet/p/12742773.html
Copyright © 2011-2022 走看看