In your page body, create a Modal Panel component as below. I am using the 'header' facet to display the title.
<rich:modalPanel id="myPopup" width="600" height="400">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Hello Popup!!"></h:outputText>
</h:panelGroup>
</f:facet>
<a4j:commandButton value="Hide" id="btn_hide"
onclick="Richfaces.hideModalPanel('myPopup');"/>
</rich:modalPanel>
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Hello Popup!!"></h:outputText>
</h:panelGroup>
</f:facet>
<a4j:commandButton value="Hide" id="btn_hide"
onclick="Richfaces.hideModalPanel('myPopup');"/>
</rich:modalPanel>
That is it.
Now run your page and open it using a browser. It displays nothing. This is because
Now edit your page and add another button as below.
<a4j:commandButton value="Show" onclick="Richfaces.showModalPanel('myPopup');"/>
Note that in this button our javascript is "Richfaces.showModalPanel('myPopup');".
Now run your page and click on 'Show' button. You will see the popup. Now click the 'Hide' button and the popup will be closed.
Another Way To Show/ Hide Popup
Instead of using javascripts you can use a '<rich:componentControl/>' tags to show and hide the popup.
In that case your 'Show' button would be as below.
<a4j:commandButton value="Show" id="btn_show">
<rich:componentControl for="myPopup" attachTo="btn_show"
operation="show" event="onclick"/>
</a4j:commandButton>
'Hide' button can be changed as below.<rich:componentControl for="myPopup" attachTo="btn_show"
operation="show" event="onclick"/>
</a4j:commandButton>
<a4j:commandButton value="Hide" id="btn_hide">
<rich:componentControl for="myPopup" attachTo="btn_hide"
operation="hide" event="onclick"/>
</a4j:commandButton>
<rich:componentControl for="myPopup" attachTo="btn_hide"
operation="hide" event="onclick"/>
</a4j:commandButton>
really usefull, ty dude
ReplyDelete