Disable all but one html element with jquery

They asked me to be able to disable all the html document but a single html element. Have done this with jquery like the following html snippet. The idea is to add 4 absolute positioned boxed "around" the given element, with big z-index with some transparency:

< !doctype html>
< html lang="es-UY">

< head>
< title>test< /title>
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">< /script>
< /head>
< body>

< script>
/**
 * disablingFocus - disable all the document instead a single element - put 4 masks around the given element
 so it appear that all except that element is disabled. */
var lib = {
 maskStyle: { 
  zIndex: 9998, 
  position: "absolute", 
  display: "block", 
  opacity: 0.5, 
  backgroundColor: "#111111" 
 },  
 mask: null, 
 disableAllBut: function(el) {
  if(!lib.masks) {
   lib.masks=[]; 
   for(var i = 0; i< 4; i++) {
    var maskEl = document.createElement("div"); 
    document.body.appendChild(maskEl); 
    $(maskEl).attr({id: "disableAllButMask"+i});
    $(maskEl).css(lib.maskStyle); 
    lib.masks.push(maskEl)
   }
  }
  var x = $(el).offset().left, 
   y = $(el).offset().top, 
   w = $(el).width(), 
   h = $(el).height(); 
  var maxWidth = 3333, //$(document.body).offset().width, 
   maxHeight = 3333; //$(document.body).offset().height; 
  $(lib.masks[0]).css({
   "left": "0px", "top": "0px", "height": y+"px", "width": maxWidth+"px"
  });
  $(lib.masks[1]).css({
   "left": "0px", "top": (y+h)+"px", "height": maxHeight+"px", "width": maxWidth+"px"
  }); 
  $(lib.masks[2]).css({
   "left": 0+"px", "top": (y)+"px", "height": h+"px", "width": x+"px"
  }); 
  $(lib.masks[3]).css({
   "left": (x+w)+"px", "top": (y)+"px", "height": h+"px", "width": maxWidth+"px"
  })
 }, 
 "":""
}; 
window.disabler=lib; 
window.disableAllBut=lib.disableAllBut; 
< /script>
< style type="text/css">
< /style>

< div class="apagado">
 hola 1
 < table>
  < tr>< td>hola hola< /td>
      < td>
   < div class="prendido">
   hola 2< p>hhhhh< a href="">hshshs< /a>< /p>
   < /div>
      < /td>
  < /tr>
  < tr>
   < div id='div3'>
   hola 3 asd < span id="div4">asd< /span> as d
   < /div>
  < /tr>
 < /table>
< /div>

< button onclick="disableAllBut(document.getElementById('div4'))">click me for the disabling< /button>



< /html>