Как замаскировать div, а также сделать всех его детей недоступными для редактирования

Question

Я работаю над разделом предварительного просмотра, в котором все визуализированные поля формы будут отображаться в этом элементе div, но единственное исключение состоит в том, что они будут непрозрачными на 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');

Answer 2

$("#targetDiv").html($("#originalDiv").html()).fadeTo(0, 0.5).find("select,input,textarea").attr('disabled',true); или аналогичный.