asp.net-mvc – Ajax.ActionLink使用背景不透明度加载图像定位

发布时间：2020-12-16 07:04:35 所属栏目：asp.Net 来源：网络整理

导读：当我单击ajax.action链接时,我想在页面中间使用backgroung opacity显示加载图像. img id="image_loading" alt="" src="../../images/site/loading.gif" style="position: fixed; display: none;" / 这是我的代码 nav class="ust_menu" ul li@Ajax.ActionLink

当我单击ajax.action链接时,我想在页面中间使用backgroung opacity显示加载图像.

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

这是我的代码

<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",LoadingElementId = "image_loading" })</li>
         <li>@Ajax.ActionLink("About","About",LoadingElementId = "image_loading" })</li>    
    </ul>
</nav>

我可以显示没有背景不透明度的图像,而不是我想要的位置.
如何在背景不透明度的页面中间显示加载图像.

谢谢.

解决方法

要使图像居中：

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

并在CSS文件中：

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

现在,如果你想做一些更奇特的效果,你可以订阅OnBegin和OnComplete回调,你可以更好地控制图像的显示方式：

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

然后：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!