Ajax.ActionLink tải định vị hình ảnh với độ mờ nền

Question

Khi tôi nhấp vào liên kết ajax.action, tôi muốn hiển thị hình ảnh tải ở giữa trang có độ mờ đục backgroung.

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

Đây là mã của tôi

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

tôi có thể hiển thị hình ảnh mà không opacity nền và không phải là vị trí tôi muốn. Làm cách nào để hiển thị hình ảnh tải ở giữa trang có độ mờ nền.

Cảm ơn.

Answer 1

Để tập trung hình ảnh:

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

và trong file CSS:

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

Bây giờ nếu bạn muốn làm một số hiệu ứng lạ mắt hơn bạn có thể đăng ký vào OnBegin và OnComplete callbacks nơi bạn sẽ có nhiều quyền kiểm soát hơn đối với hình ảnh được hiển thị:

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

và sau đó:

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

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