Hi All,
When i set modal to true(under all themes), the background will kind of white out (covered by a blank white page completely) when dialog box (with modal = true) appears. Then i check css section:
.igdw_ModalBackground{ filter:alpha(opacity:50); opacity:0.5; position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:white;}
Clearly somehow the css does not work. I tried to change background color to red , it does not work as well.
here is my jsp code. Please help.
It is worth mentioning that the following code is inc file to be included inside another jsp.
==========================================================================================
<% String notice="abc"; %>
<f:view> <h:form id="_form01"> <f:verbatim escape="false"> First Time User please click <a href="#" onclick="igShowDialog();return false">here</a> </f:verbatim> <h:panelGroup styleClass="main"> <h:panelGroup styleClass="section"> <ig:dialogWindow id="igDw001" modal="true" windowState="hidden" style="width:450px;height:350px" binding="#{webdw_bb.dialogWindow}" > <ig:dwHeader captionText="First Time User"> <ig:dwMinimizeBox /> <ig:dwCloseBox /> </ig:dwHeader> <ig:dwContentPane> <f:verbatim escape="false"><br> <div align="center"><%=notice%></div> <div align="right"><br><br> <button onclick="igHideDialog();return false;">Close</button> </div> <script> function igHideDialog() { var igJsDwNode = ig.dw.getDwJsNodeById("_form01:igDw001"); if (igJsDwNode != null) { igJsDwNode.set_windowState(ig.dw.STATE_HIDDEN); } } function igShowDialog() { var igJsDwNode = ig.dw.getDwJsNodeById("_form01:igDw001"); if (igJsDwNode != null) { igJsDwNode.set_windowState(ig.dw.STATE_NORMAL); } } </script> </f:verbatim> </ig:dwContentPane> </ig:dialogWindow> </h:panelGroup> </h:panelGroup> </h:form></f:view>
Please advise. thank you very much
yours
yak
Hi
I jsut came to realize that this effect has something to do with table that encloses view
if f:view is within table cell, it will whiteout the background.
if h:form is enclosed by a table, it will whiteout the background. eg:
<f:view>
<table border="1"><tr><td>
<h:form>
<ig:dialogWindow xxxxx />
</h:form>
</td></tr></table>
</f:view>
if h:panelGroup is enclosed by a table, it will whiteout the background similar to h:form
if ig:dialogWindow is directly enclosed by a table, it will however function correctly.
eg:
<f:verbatim escape="false"> Click <a href="#" onclick="igShowDialog();return false">here</a>
</f:verbatim>
<h:panelGroup>
</h:panelGroup>
Please advise. Your help is greatly appreciated.
thanks