css - JSF - 为弹出面板创建覆盖

Question

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

我有两个问题:

1. 我附加了一个 a4j:support 对象，单击该对象可使叠加层消失。这样做的问题是，当我点击上传组件上的上传按钮时，支持会捕获点击事件并在我有机会完成操作之前关闭与上传组件的叠加层。
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> 反而。