Ajax.ActionLink cargando la posición de la imagen con opacidad de fondo

Question

Cuando hago clic en el enlace ajax.action, quiero mostrar la imagen de carga en el medio de la página con opacidad de fondo.

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

Aquí está mi código

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

puedo mostrar la imagen sin fondo opacidad y no la posición que quiera. ¿Cómo puedo mostrar la imagen de carga en el medio de la página con la opacidad del fondo?

Gracias.

Answer 1

para centrar la imagen:

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

y en el archivo CSS:

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

Ahora bien, si usted quiere hacer algunos efectos más fantasía que podría suscribirse al OnBegin y OnComplete devoluciones de llamada en la que se tener más control sobre la forma en que se muestra la imagen:

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

y luego:

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

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