Question

我没有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”

Answer 1

试试这个：

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

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

Answer 2

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

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

仅显示一个按钮的加载gif

2 个答案: