Javascript 分区覆盖/重叠其他元件

我想制作一个可重用的函数，使我能够轻松地用半透明的div覆盖或重叠元素，如select、textfield、input、div、table等，使其达到精确的高度和宽度

我能够得到元素的位置和大小：

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

但是，如何将元素位置和大小与div绑定？如果元素位置或大小发生变化，则div也会随之变化。有没有关于我怎么做的建议？或者，是否存在用于此的jquery插件？我相信这对于临时禁用ajax等操作的用户交互中的元素非常有用

谢谢。

像这样

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;
}

---

您可以使用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');
    });
};

$.fn.overlay=函数（）{
返回此值。每个（函数（）{
var$this=$（this）；
var left=$this.offset（）.left；
var top=$this.offset（）.top；
var width=$this.outerWidth（）；
var height=$this.outerHeight（）；
$this.wrap（“”）
.css（'opacity'，'0.2'）
.css（'z-index'，'2'）
.css（'background'，'gray'）；
});
};

Bootply上的演示：

---

这应该是通用的，并且是可重用的。。不仅仅是引导元素

非常感谢您的回复。但我正在寻找一个可重用的解决方案。我的意思是有一个div，它将自动检测我想要重叠的元素的大小以及该元素的位置。然后，将该div放在该元素的顶部。