DIV封面/重疊其他元素

Question

我想做一個可重複使用的功能，使我能夠輕鬆地覆蓋或重疊一個元素，如選擇，文本框，輸入，div，表等與半透明div到它的確切的高度和寬度。

我能夠獲得元素的位置和大小：

$(element).height() 
$(element).width() 
$(element).offset().top 
$(element).offset().left 

但是，我怎麼能綁定在div元素位置和大小？如果元素的位置或大小發生變化，那麼div將會改變。任何建議，我如何能做到這一點？或者，是否有任何現有的jQuery插件？我相信這將是非常有用的臨時禁用用戶交互操作，如ajax等元素。

謝謝。

Answer 1

你可以使用jQuery .wrap()功能和覆蓋相應的CSS創建一個函數/插件..

$.fn.overlay = function() { 

    return this.each(function(){ 
     var $this = $(this); 

     var left = $this.offset().left; 
     var top = $this.offset().top; 
     var width = $this.outerWidth(); 
     var height = $this.outerHeight(); 

     $this.wrap("<div id='overlay'> </div>") 
     .css('opacity', '0.2') 
     .css('z-index', '2') 
     .css('background','gray'); 
    }); 
}; 

演示上Bootply：http://bootply.com/87132

這應該一般地工作，並且可重複使用..不只是引導元素！

Answer 2

像這樣

demo

CSS

div { 
position:relative; 
z-index:1; 
height:200px; 
width:400px; 
background-color:green; 
} 

div div { 
position:absolute; 
z-index:2; 
top:0px; 
bottom:0px; 
left:0px; 
right:0px; 
background-color:black; 
opacity:0.5; 
} 

div div input { 
position:relative; 
top:25px; 
z-index:1; 
}