I am working on a preview section wherein all form fields that were rendered will be shown under this div but the only exception is that they will be 50% opaque and also they would be editable.

I tried getting innerhtml for all fields and then displaying the same in this new div. After displaying I have disabled their visibility. But still it doesnt work.

Can someone help on this? I think this is a pretty standard requirement. Found a solution in JQuery where we can get the preview image in modal screen. I want to show the preview within the doc and hence choose another div having content as innerhtml of all form elements.

I am working on a preview section wherein all form fields that were rendered will be shown under this div but the only exception is that they will be 50% opaque and also they would be editable.

I tried getting innerhtml for all fields and then displaying the same in this new div. After displaying I have disabled their visibility. But still it doesnt work.

Can someone help on this? I think this is a pretty standard requirement. Found a solution in JQuery where we can get the preview image in modal screen. I want to show the preview within the doc and hence choose another div having content as innerhtml of all form elements.

• javascript
• jquery
• html
• mask
• children

• put some code, if u try some thing – mgraph Commented Feb 14, 2012 at 12:30

2 Answers 2

You could overlay with a 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)

And then...

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

And if you want to remove it

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

$("#targetDiv").html($("#originalDiv").html()).fadeTo(0, 0.5).find("select,input,textarea").attr('disabled',true); or similar.