div를 마스크하고 모든 자식을 편집 할 수 없게하는 방법

Question

미리보기 섹션에서 렌더링되는 모든 양식 필드가이 div 아래에 표시되지만 유일한 예외는 50 % 불투명도이며 그들은 편집 가능할 것이다.

나는 모든 필드에 대해 innerhtml을 가져 와서이 새로운 div에 같은 것을 표시하려고했습니다. 표시 후 나는 그 시정을 막았습니다. 그러나 아직도 그것은 작동하지 않습니다.

누군가에게 도움을 줄 수 있습니까? 나는 이것이 꽤 표준적인 요구 사항이라고 생각한다. JQuery에서 모달 스크린에서 미리보기 이미지를 얻을 수있는 솔루션을 찾았습니다. 나는 문서 내에서 미리보기를 보여주고 따라서 모든 양식 요소의 innerhtml과 같은 내용을 갖는 다른 div를 선택하려고합니다.

Answer 1

$("#targetDiv").html($("#originalDiv").html()).fadeTo(0, 0.5).find("select,input,textarea").attr('disabled',true); 또는 이와 유사한 것.

Answer 2

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

을 그리고 당신은 u는 어떤 것을 시도 할 경우

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