DIV如何覆盖/重叠其他元素

Question

我想创建一个可重复使用的函数，可以轻松地将一个元素（如select、textfield、input、div、table等）与一层半透明的div重叠，使其覆盖到相同的高度和宽度。

我能够获取元素的位置和大小：

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

然而，我该如何将元素位置和大小与div绑定？如果元素的位置或大小发生改变，那么div也会随之改变。有没有建议可以实现这一点？或者，是否已经有现成的jQuery插件可用？我相信这将对临时禁用用户交互的元素进行操作（例如ajax等）非常有用。

谢谢。

- user1995781

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

这个应该是通用的，可重复使用的，不仅仅适用于Bootstrap元素！

- Carol Skelly

Answer 2

像这样

演示

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

- Falguni Panchal

---

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