Jquery BlockUI element blocking

Question

I am trying to block certain part of the page.I am following the http://jquery.malsup.com/block/#element tutorial, but i am not able to map the element .

My js:

 $('div.repoDisplay').blockUI({ message: '' ,overlayCSS: { backgroundColor: '#fff'   }});

My html :

  <div class="container-sc" style="display: table;">
   <div id='repoDisplay' >
    <div style="display: table-cell;width:150px">
     \\\\\\\\\\\
      </div>
   </div>


   <div style="display: table-cell;padding:10px;width:85%"">
   {{outlet}}             
   </div>

</div>

But it is showing uncaught type error:undefined in my js.

Thanks for the help

Answer 1

$.blockUI() is using to block whole page, If you want to block element section then use block() function only, and use right <selector> repoDisplay is id so you need to use with #, see below code

$('div#repoDisplay').block({
    message: '' ,
    overlayCSS: { backgroundColor: '#fff'   }
 });

FIDDLE Demo