---
title : 網頁顯示「資料載入中」
tags: 網頁顯示資料載入中
creat-date: 2023-02-01
update_date : 2023-02-01
---

---
## 網頁顯示「資料載入中」
---

### 一、使用 bootstrap.min.css：


**(1) 引用 bootstrap.min.css**

<link rel="stylesheet" href="~/vendor/bootstrap-5.1.3/bootstrap.min.css"/>

**(2) 彈跳視窗載入資料，顯示Loading寫在 UpdateProgress 中**

<div class="offcanvas offcanvas-bottom " tabindex="-1" id="offcanvasDataList"> 
    <div class="offcanvas-header block-title blue-purple">        
    ...
    </div>
    
    <div class="offcanvas-body">
    ...
    </div>
    
    <asp:UpdateProgress ID="upLoading" runat="server" ClientIDMode="Static">
        <ProgressTemplate>
            <div class="position-absolute top-0 w-100 h-100 d-flex justify-content-center align-items-center gap-2 bg-dark bg-opacity-75 text-light"  >
                <span class="spinner-border" role="status" aria-hidden="true"></span>
                <h5>Loading...</h5>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress> 
</div>

**(3) 資料載入完成後再用js把Loading關閉，等待下次要再顯示資料時再把Loading顯示：**

<script type="text/javascript">
    
// 顯示「Loading...」
function ShowListData(itemname) {       
    $get('upLoading').style.display = 'block';
}

// 隱藏「Loading...」
function SetLoadingHide() {
    $get('upLoading').style.display = 'none';
}

</script>
        

### 二、使用 jquery.blockUI.js：


**(1) 引用 jquery.blockUI.js**

<script type="text/javascript" src="../Script/jquery.blockUI.js"></script>    

**(2) 點選按鈕顯示**

<asp:Button ID="btnUpload" Text="上傳" OnClientClick="showBlockUI();" OnClick="btnUpload_Click"  runat="server" />

**(3) 顯示/關閉 js**

<script type="text/javascript"> 

// 顯示載入中    
function showBlockUI() {            
    $.blockUI({
        message: '<table><tr><td valign="middle" style="height:100px" class="main"><img src="../images/ajax-loader.gif" width="530px" height="50px" /><br/><span style="font-size:18px;font-weight:bold;color:blue;">資料上傳中，請稍候</span></td></tr></table>',
        css: {
            width: '550px',
            height: '100px'
        }
    });
}

// 關閉載入中
function closeBlockUI() {           
    $.unblockUI();
}

</script>