通過封面覆蓋禁用更多的頁面中的一個元素

Question

我在一個頁面中有一些元素，我想覆蓋這些元素以禁用這些元素。

我有一個ajax調用成功，我用coverWithOverlay($('.disable'));來禁用所有具有.disable類的元素。

下面是函數：

function coverWithOverlay($element) { 
     var pos = $element.offset(); 

     var $overlay = $('<div class="inside"></div>').attr({ 
      title: 'this is disabled' 
     }).css({ 
      position: 'absolute', 
      backgroundColor: 'white', 
      opacity: 0.5, 
      top: pos.top + 'px', 
      left: pos.left + 'px', 
      width: $element.outerWidth() + 'px', 
      height: $element.outerHeight() + 'px' 
     }); 

     $(document.body).append($overlay); 

     return $overlay; 
    } 

它的工作原理，如果我有在頁面只是一個元素。我怎樣才能對幾個元素進行調查？
某些頁面有一個頁面有多個要禁用的元素。

Answer 1

你爲什麼不嘗試這樣的事情？

function coverWithOverlay($elements) { 
    $($elements).each(function() { 
     var $element = $(this); 
     var pos = $element.offset(); 

     var $overlay = $('<div class="inside"></div>').attr({ 
      title: 'this is disabled' 
     }).css({ 
      position: 'absolute', 
      backgroundColor: 'white', 
      opacity: 0.5, 
      top: pos.top + 'px', 
      left: pos.left + 'px', 
      width: $element.outerWidth() + 'px', 
      height: $element.outerHeight() + 'px' 
     }); 

     $(document.body).append($overlay); 
    }); 
} 

工作小提琴：http://jsfiddle.net/codovations/23FtA/

---

話雖這麼說， jQuery BlockUI plugin會做到這一點更通用的方式。
小提琴： http://jsfiddle.net/codovations/X5DfK/