2016-07-27 55 views
0

CSS:如何隱藏代碼加載圖像格背後

<style type="text/css"> 
    .modal 
    { 
     position: fixed; 
     top: 0; 
     left: 0; 
     background-color: black; 
     z-index: 99; 
     opacity: 0.8; 
     filter: alpha(opacity=80); 
     -moz-opacity: 0.8; 
     min-height: 100%; 
     width: 100%; 
    } 
    .loading 
    { 
     font-family: Arial; 
     font-size: 10pt; 
     border: 5px solid #67CFF5; 
     width: 200px; 
     height: 100px; 
     display: none; 
     position: fixed; 
     background-color: White; 
     z-index: 999; 
    } 
</style> 

JS:

<script type="text/javascript"> 
    function ShowProgress() { 
     // alert("aa"); 
     setTimeout(function() { 
      var modal = $('<div />'); 
      modal.addClass("modal"); 
      $('body').append(modal); 
      var loading = $(".loading"); 
      loading.show(); 
      var top = Math.max($(window).height()/2 - loading[0].offsetHeight/2, 0); 
      var left = Math.max($(window).width()/2 - loading[0].offsetWidth/2, 0); 
      loading.css({ top: top, left: left }); 
     }, 200); 
    } 
</script> 

HTML:

<div class="loading" align="center" id="loader"> 
       Loading. Please wait. 
       <br /> 
       <img id="abc" src="../../Images/loader.gif" alt="" /> 
      </div> 
<div> 
    <asp:UpdatePanel ID="UpdatePaneltab" runat="server" UpdateMode="Always"> 
     <ContentTemplate> 
<asp:Button ID="btnSearch" runat="server" Text="Run" CssClass="btn-in" OnClick="btnSearch_Click" OnClientClick="ShowProgress()" /> 
</ContentTemplate> 
<Triggers> 
      <asp:PostBackTrigger ControlID="btnSearch" /> 
     </Triggers> 
    </asp:UpdatePanel> 

我使用上面的代碼顯示在加載圖片的div按鈕單擊。但我無法將其隱藏在按鈕點擊代碼內部的任何位置。在所有按鈕點擊代碼執行後它會自動隱藏ed.I具有exporttoexcel功能,我想在我的這個功能開始執行之前隱藏它,因爲一旦導出開始,就不能控制頁面和代碼。但是即使在導出完成後,加載圖像也會持續顯示。 目前我正在使用

ClientScript.RegisterStartupScript(this.GetType(), "hwa", "document.getElementById('loader').style.visibility = 'hidden';", true); 

隱藏div。

我無法找出最新的問題。有些東西我缺少,我需要添加代碼。 有什麼建議嗎?有任何想法嗎? 請helpme.I卡住了。

回答

0

你應該把一個JavaScript函數寫入一個javascript文件或你的aspx文件中。

function HideLoader() { 
    $(".loading").hide(); 
    $(".modal").hide(); 
} 

那麼你應該調用你的啓動腳本此功能:

ClientScript.RegisterStartupScript(this.GetType(), "hwa", "HideLoader();", true); 

由於RegisterStartupScript輸出寫入頁面加載後的網頁,不執行內聯腳本。

編輯:

你或許應該隱藏兩個.modaldiv.loadingdiv。我改變了JavaScript。你應該把一個斷點放到HideLoader的javascript函數中,看看它是否被調用。如果它被調用並且它不隱藏div,那麼您將有更容易的時間來解決問題。只需糾正js函數來隱藏加載div。如果它沒有被調用,你應該關注RegisterStartupScript,看看你如何使它調用你的函數。

+0

oops ..sorry ..actualy它的hidden.i發佈了一個錯誤的code.its行,只隱藏但仍然無法隱藏它。 – Pwavel002

+0

感謝您的解決方案。我試過你的解決方案..但它不工作 – Pwavel002