2016-07-27 54 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