jquery - 使用 Jquery 和 css 屏蔽屏幕

Question

我试图在 ajax 调用开始和停止时阻止 UI 和取消阻止 UI。有人可以指导我如何实现这一点。

This is what i tried so far

J查询代码

   var $loading = $('#Processing').hide();
    $(document)
      .ajaxStart(function () {
          var $body = $('body');
          this.$mask = $('<div class="DialogMask"></div>');
          $body.append(this.$mask);
          $loading.show();

      })
      .ajaxStop(function () {
          var $body = $('body');
          this.$mask = $('<div class="DialogMask"></div>');
          $body.remove(this.$mask);
          $loading.hide();
      });

CSS 代码

div.DialogMask
{
    padding: 10px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    background-color: #606060;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    -moz-opacity: .5;
    opacity: .5;
}

Answer 1

下面几行

this.$mask = $('<div class="DialogMask"></div>');
$body.remove(this.$mask);

什么都不做。您正在使用类 DialogMask 创建一个新 div，然后将其从正文中删除，这没有任何作用，因为您从未将那个特定的 div 添加到正文中。

您要做的是选择现有的 DialogMask 并将其删除。

$body.remove('.DialogMask');

我不确定你为什么要为 $mask 变量使用 this.，它没有为你做任何事。