如何掩盖一个div并使其所有孩子都不可编辑

Question

我正在制作一个预览部分,其中所有渲染的表单字段都将显示在此div下,但唯一的例外是它们将是50%不透明,并且它们也是可编辑的.

我尝试为所有字段获取innerhtml,然后在这个新div中显示相同内容.显示后我已禁用其可见性.但它仍然没有用.

有人可以帮忙吗？我认为这是一个非常标准的要求.在JQuery中找到了一个解决方案,我们可以在模态屏幕中获取预览图像.我想在doc中显示预览,因此选择另一个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');