Ajax.ActionLink chargement positionnement d'image avec l'opacité de l'arrière-plan

Question

Lorsque je clique sur le lien ajax.action, je veux afficher l'image de chargement au milieu de la page avec une opacité de backgroung.

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

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

Je peux montrer l'image sans l'opacité de fond et non la position que je veux. Comment puis-je montrer l'image de chargement au milieu de la page avec l'opacité d'arrière-plan.

Merci.

Answer 1

Pour centrer l'image:

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

et dans le fichier CSS:

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

Maintenant, si vous voulez faire des effets plus de fantaisie, vous pouvez vous abonner aux callbacks OnBegin et OnComplete où vous voulez avoir plus de contrôle sur la façon dont l'image est affichée:

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

puis:

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

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