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

Answer 2

$("#targetDiv").html($("#originalDiv").html()).fadeTo(0, 0.5).find("select,input,textarea").attr('disabled',true);或类似的。

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

2 个答案: