Restrict the overlay boundaries of dialog to be within only one layoutUnit that contains it

I am using primefaces dialog (with modal=true). 开发者_如何学运维 I need to restrict the overlay of dialog box to be within one layoutUnit which contains it & do not spread the overlay on the entire page(which contains several layoutUnits).

You will likely have to create your own modal overlay display it when you show the dialog.

<div class="customoverlay" />

You will need to create a stylesheet class for a div file that spreads it across the parent container, sets its zindex to a number higher than anything else in that layout unit except for the dialog, and you will probably want to set its opacity to a value of your choosing.

In the javascript that displays your dialog you will also need to make a jQuery call to display your overlay as well.

exampleDialog.show();
jQuery('.customoverlay').css('display', 'inline');

The javascript that hides your dialog you will want to do the same thing as above except set the display style to none.