RichFaces provides ready-to-use Ajax components to enable building Ajax-based JSF applications. One of the interesting component that you will end up commonly end up relying on would be the rich:modalPanel. Modal Panel, as the name implies, lets you display a modal dialog window (desktop borrowed paradigm) on screen that will render the parent widow locked out for edit.

You may refer to the Richfaces developer documentation for more details of the usage of this component. Although Richfaces library does a good job in handling the browser incompatibility concerns, there are times when it fails to find a good solution. Modal Panel is such a special case; as per the Practical Richfaces book, in order to avoid a bug in Internet Explorer, the root node of the modal panel is moved to the top of a DOM tree.

However, you should have a separate form inside the modal panel if you want to perform submits from this panel. So the modal panel itself should not be placed inside any other form if it has its own form.

If you have multiple Modal Panels in your application, you may use the “zindex” property for relative positioning of the windows (default value is 100)