Masking screen with Jquery and css

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

Question

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;
}
Was it helpful?

Solution 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();
    });

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top