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

这应该通用并且可以重复使用..不仅仅是Bootstrap元素！

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

DIV覆盖/重叠其他元素

2 个答案: