Блог

На одном из моих веб-сайтов должна быть функция, которая работает следующим образом: Нажатие кнопки> Всплывающий режим > Закрыть режим

Когда пользователи нажимают на кнопку, стиль кнопки будет изменен на загрузку с помощью jQuery addClass, пока не появится модальное всплывающее окно.

Когда появится модальное всплывающее окно, кнопка позади будет удалить класс загрузки с помощью jQuery.

Когда пользователи закрывают модал, они могут снова нажать на кнопку и снова вызвать modal pop.

Я перепробовал много методов, но у всех методов будет своя проблема, о которой я упоминаю ниже:

Это мой код кнопки (в iFrame)

 <a runat="server" id="btnPersonalSearch" class="btn btn-primary btn-lg btn-block" onserverclick="btnPersonalSearch_ServerClick"  >
    <span runat="server" id="iconPersonalSearch" class="" role="status" aria-hidden="true"></span>
    Search
</a>
  

Когда пользователи нажимают на кнопку выше, класс button будет изменен с помощью jQuery

 $("#btnPersonalSearch").click(function () {
    $('#iconPersonalSearch').attr("class","spinner-border spinner-border-sm mr-05");
});
  

Когда модальное всплывающее окно, я использую этот код для удаления класса, чтобы вернуть его в нормальное состояние

 $("#PersonalModal").on('show.bs.modal', function () {
    $('#iconPersonalSearch').attr("class", "");
});
  

или этот

 $("#PersonalModal").on('show.bs.modal', function () {
    $('#iconPersonalSearch').removeClass('spinner-border spinner-border-sm mr-05');
});
  

Вопрос 1:
Успешно изменить стиль на загрузку после того, как я нажал кнопку, но когда я закрываю модальный и нажимаю снова, стиль больше не изменится (но модальный pop все еще работает). Могу ли я узнать, какая проблема вызвала это?

Модальное всплывающее окно после некоторых вычислений, выполненных из кода, созданного с помощью c#

 ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#PersonalModal').modal('show');", true);
  

На самом деле, наилучший эффект для этой функции должен заключаться в добавлении модального в верхнее окно,
Но когда я добавляю его в верхнее окно, кнопка первого нажатия может изменить стиль, а также модальное нажатие, второе нажатие на кнопку вообще не будет включать изменение стиля и модальное нажатие.

Я использую приведенный ниже код из code behind для добавления модального в верхнее окно

 ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "var fatherBody = $(window.top.document.body);fatherBody.append($('#PersonalModal').modal('show'));", true);
  

Вопрос 2:
Как я могу позволить кнопке работать с изменением стиля, а также модальным отображением независимо от того, сколько раз я нажимаю на нее?

Проблема решается с помощью приведенного ниже кода для addClass

 var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
    prm.add_beginRequest(function (sender, e) {
        $('#iconPersonalSearch').addClass('spinner-border spinner-border-sm mr-05');
    });
}
prm.add_endRequest(function (sender, e) {
    if (sender._postBackSettings.panelsToUpdate != null) {
        $('#iconPersonalSearch').attr("class", "");    
    }
});