Ajax.ActionLink Laden der Bildpositionierung mit Hintergrundopazität

Question

Wenn ich auf den Link ajax.action klicke, möchte ich das Ladebild in der Mitte der Seite mit Backup-Deckkraft anzeigen.

<img id="image_loading" alt="" src="../../images/site/loading.gif" style="position: fixed;  
    display: none;" /> 

Hier ist mein Code

<nav class="ust_menu"> 
    <ul> 
     <li>@Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li> 
     <li>@Ajax.ActionLink("Contact Us", "Contact", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li> 
     <li>@Ajax.ActionLink("About", "About", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li>  
    </ul> 
</nav> 

I Bild ohne Hintergrundopazität zeigen kann und nicht die Position, die ich will. Wie kann ich laden Bild in der Mitte der Seite mit Hintergrund Opazität.

Danke.

Answer 1

das Bild zum Zentrum:

<img id="image_loading" alt="" src="@Url.Content("~/content/loading.gif")" class="progress" /> 

und in CSS-Datei:

.progress { 
    display: none; 
    position: fixed; 
    top: 50%; 
    left : 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
} 

Nun, wenn Sie etwas mehr Phantasie Effekte tun wollen Sie die OnBegin und OnComplete Rückrufe abonnieren können, wo Sie haben mehr Kontrolle über die Art, wie das Bild angezeigt wird:

@Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions { 
    OnBegin = "onBegin", 
    OnComplete = "onComplete", 
    UpdateTargetId = "article_site" 
}) 

und dann:

function onBegin() { 
    // TODO: show the progress image 
} 

function onComplete() { 
    // TODO: hide the progress image 
}