仅显示一个按钮的加载 gif

Show loading gif for one button only

本文关键字：按钮 加载 gif 一个 显示      更新时间：2023-09-26

我没有 js 过期，所以我需要帮助。

我找到了一些 JS 脚本，如何为所有提交按钮显示加载 GIF，我正在尝试仅显示一个提交按钮的 GIF。

它的外观：

  function ShowProgress() {
    setTimeout(function () {
    var modal = $('<div />');
    modal.addClass("modal");
    $('body').append(modal);
    var loading = $(".loading");
    loading.show();
    var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
    var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
    loading.css({ top: top, left: left });
    }, 200);
}
$('form').live("submit", function () {
    ShowProgress();
});

.CSS：

.modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}
.loading
{
    font-family: Arial;
    font-size: 10pt;
    border: none;
    width: auto;
    height: auto;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}

这是一对一的扩展：http://www.aspsnippets.com/Articles/Display-loading-image-while-PostBack-calls-in-ASPNet.aspx

我只需要将它用于此按钮：

asp：Button ID="InitDataButton" OnClick="InitData_Click" runat="server" text="show" width="110px" height="30px"

好的。我不知道您的服务器端，但我检查了您提供的参考。所以这是另一种解决方案。尝试将脚本从 Page_Load（） 中的 IsPostBack 移动到此按钮的按钮单击处理程序。我假设您使用的是 VB，但 C# 的想法是相同的。

Dim script As String = "$(document).ready(function () { $('[id*=InitDataButton]').click(); });"
ScriptManager.RegisterStartupScript(this, "load", script, True)

试试这个：

$( "#InitDataButton" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  ShowProgress();
  event.preventDefault();
});

LIVE EVENT 从 1.9 版本开始被删除，因此最好避免使用它。

相关文章：