DIV 覆盖/重叠其他元素

DIV cover/overlap other element

本文关键字：其他 元素 重叠 覆盖 DIV      更新时间：2023-09-26

我想做一个可重用的函数，使我能够轻松地覆盖或重叠一个元素，如选择、文本字段、输入、div、表格等，并用一个半透明的div 到它的确切高度和宽度。

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

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

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

谢谢。

您可以使用

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

引导演示：http://bootply.com/87132

这应该普遍工作并且是可重用的......而不仅仅是用于引导元素！

像这样

演示

.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;
}
相关文章：