2016-07-27 19 views
0

CSS loading image div:Wie verbergen von Code hinter

<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> 

ich oben Code bin mit Lade Bild div zeigen auf button click.Aber ich bin nicht in der Lage, es zu verstecken, wo immer ich in Button-click code.It wird automatisch ausgeblendet, nachdem alle Schaltfläche klicken Code ist ausführbar ed.Ich habe exporttoexcel-Funktionalität, und ich möchte es ausblenden, bevor meine diese Funktionalität startet, denn sobald der Export beginnt gibt es keine Kontrolle über die Seite und Code.Aber das Laden Bild wird kontinuierlich angezeigt, auch wenn der Export abgeschlossen ist. zur Zeit bin ich mit

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

div zu verbergen.

Ich bin nicht in der Lage, herauszufinden, was das Problem ist. Gibt es etwas, das ich vermisse, die ich in Code hinzufügen muss. Irgendwelche Vorschläge? irgendwelche Ideen? Bitte helpme.Ich stecke fest.

Antwort

0

Sie sollten eine JavaScript-Funktion in eine Javascript-Datei oder in Ihre aspx-Datei schreiben.

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

Dann sollten Sie diese Funktion in Ihrem Startskript aufrufen:

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

Da der Ausgang des RegisterStartupScript in die Seite geschrieben wird, nachdem die Seite geladen wird, wird die Inline-Skript nicht ausgeführt.

Edit:

Sie sollten wahrscheinlich verstecken sowohl die .modaldiv und die .loadingdiv. Ich habe das Javascript geändert. Sie sollten einen Haltepunkt zu HideLoader JavaScript-Funktion setzen und sehen, ob es aufgerufen wird. Wenn es aufgerufen wird und das Div nicht versteckt, haben Sie eine einfachere Zeit, das Problem zu lösen. Korrigiere einfach die js-Funktion, um die Ladedivs zu verbergen. Wenn es nicht aufgerufen wird, sollten Sie auf RegisterStartupScript konzentrieren und sehen, wie Sie es Ihre Funktion aufrufen können.

+0

oops..sorry..actualy seine hidden.i schrieb eine falsche Zeile code.its versteckt nur, aber immer noch nicht in der Lage, es zu verbergen. – Pwavel002

+0

danke für Ihre Lösung.Ich habe versucht Ihre Lösung..aber es funktioniert nicht – Pwavel002