JSF - 为弹出式面板创建叠加层

Question

我创建了一个叠加层，只要有人想要将文件上传到系统，它就会弹出。 Gui看起来像这样（当叠加层上升时）

我有两个问题：

1. 我附加了一个a4j：支持对象，onclick，使叠加层消失。这样做的问题是，当我单击上传组件上的上传按钮时，支持捕获click事件并使用上传组件关闭覆盖，然后才有机会完成操作。
2. 我选择了两种不同的风格类。一个用于叠加，一个用于上传面板。但是叠加层的样式接管了上传组件，它也变得透明。

实现看起来像这样：

<h:panelgroup layout="block" styleClass="overlayClass">
  <rich:fileUpload styleClass="uploadStyleClass"... />
  <a4j:support event="onclick" action="#{mrBean.switchOverlayState}" reRender="..."/>
</h:panelGroup>

CSS：

.overlayClass {
        Opacity: 0.5;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
}

.uploadStyleClass {
         opacity: 1.0;
         ...
}

感谢您的帮助！

Answer 1

我建议改用<rich:modalPanel>。