javascript - DIV 覆盖/覆盖其他元素

Question

我想制作一个可重复使用的函数，使我能够轻松地用半透明的 div 覆盖或重叠元素，例如选择、文本字段、输入、div、表格等。

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

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

但是，如何将元素位置和大小与 div 绑定(bind)？如果元素位置或大小发生变化，那么作为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 元素!