I'm trying to make a modal panel non-modal (which is working), and have a slight transparency (not working) so you can lightly see what's behind it.  I have seen postings about transparencies, but can't seem to figure it out.  Below is what I'm trying.

<rich:modalPanel id="panel" width="350" height="100" showWhenRendered="true" styleClass="noMaskClass">

        <f:facet name="header">

            <h:panelGroup>

                <h:outputText value="Modal Panel"></h:outputText>

            </h:panelGroup>

        </f:facet>

        <f:facet name="controls">

            <h:panelGroup>

                <h:graphicImage value="/images/modal/close.png" styleClass="hidelink" id="hidelink"/>

                <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>

            </h:panelGroup>

        </f:facet>

       

        <h:outputText value="This panel is called using Component Control Component"></h:outputText>

        <br/>

        <h:outputText value="Closure link (X) works also through Component Control"></h:outputText>

    </rich:modalPanel>

 

 

.noMaskClass .rich-mpnl-mask-div{

     display:none;

     filter: alpha(opacity=0);

     opacity:0;

}