Masking screen with Jquery and css

StackOverflow https://stackoverflow.com/questions/21393997

質問

I am trying to block UI and unblock UI on ajax calls start and stop. Could some one guide me on how to implement this.

This is what i tried so far

Jquery Code

   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 Code

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;
}
役に立ちましたか？

解決 2

I would rather do it that way :

    <body>
      Welcome
      <div class="DialogMask"></div>
    </body>

And for Javascript :

    var $loading = $('#Processing');
    $loading.hide();
    $(document)
    .ajaxStart(function () {
      $('.DialogMask').show();
      $loading.show();
    })
    .ajaxStop(function () {
      $('.DialogMask').hide();
      $loading.hide();
    });

他のヒント

The following lines

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

are doing nothing. You are creating a new div with class DialogMask, and then removing it from the body, which does nothing since you never added that particular div to the body.

What you want to do is select the existing DialogMask and remove it.

$body.remove('.DialogMask');

I'm not sure why you're using this. for the $mask variable, it's not doing anything for you.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top