javascript - 如何屏蔽一个 div 并使其所有子元素不可编辑

Question

我正在开发一个预览部分，其中呈现的所有表单字段都将显示在此 div 下，但唯一的异常(exception)是它们将是 50% 不透明的，而且它们是可编辑的。

我尝试为所有字段获取 innerhtml，然后在这个新的 div 中显示相同的内容。显示后我禁用了他们的可见性。但还是不行。

有人可以帮忙吗？我认为这是一个非常标准的要求。在 JQuery 中找到了一个解决方案，我们可以在其中获取模态屏幕中的预览图像。我想在文档中显示预览，因此选择另一个包含内容的 div 作为所有表单元素的 innerhtml。

Answer 1

你可以覆盖一个 div。

(function($){
  $.fn.overlayMask = function (action) {
    var mask = this.find('.overlay-mask');

    // Create the required mask

    if (!mask.length) {
      this.css({
        position: 'relative'
      });
      mask = $('<div class="overlay-mask"></div>');
      mask.css({
        position: 'absolute',
        width: '100%',
        height: '100%',
        top: '0px',
        left: '0px',
        zIndex: 100
      }).appendTo(this);
    }

    // Act based on params

    if (!action || action === 'show') {
      mask.show();
    } else if (action === 'hide') {
      mask.hide();
    }

    return this;
  };
})(jQuery)

然后……

$('#my-div-to-mask').overlayMask();

如果你想删除它

$('#my-div-to-mask').overlayMask('hide');