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層

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章