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