XPages View onClick Modal Dialog Show

Question

I can open standart Xpages (.xsp) when i click on document in view with a ClientSide function. But I have created HTML modal Dialog then I just want to open Modal Dialog when i click on the document in ViewPanel. This code below allows only to show Modal dialog that I would like it to be shown. I works correct. What i want to do is just open dialog with Document. RowAttrs belogs to ViewPanel

<!-- This is the Code to open modal Dialog -->
<xp:this.rowAttrs> <xp:attr name="onClick">
<xp:this.value><![CDATA[#{javascript:try 
{
    var curDoc:NotesDocument = viewEntry.getDocument();
    var aPath=sessionScope.pathDBName;       
    return "$('#modal_theme_custom').modal('show');"; 
  //return "OpenModal('show', 'modal_theme_custom','" + curDoc.getUniversalID().toString() + "');";
} 
catch(e)
{
     print(e.toString()); 
     
}   
}]]></xp:this.value>
</xp:attr>
</xp:this.rowAttrs>

I have created a function to open modal with document but I could not be succeded. Here is the function. If i could open dialog with this function I can pass trough the DocumentUniqueID then could open it. I can send Whole Dialog Code...

function OpenModal(mode, modalName, unid) 
{ 
    var action = ""; 
    var windowName = ""; 
    
    var documentId = (unid != null) ?  + unid : ""; 
    var URLSuffix = "";  
    var noteWebLink = "$('#" + modalName + "').modal('" + mode + "');"; 
    return noteWebLink;
}

UPDATE

Answer 1

Use xe:dialog as the main container for your modal dialog and open or close it by addressing its id( id="dialog1" below). Within that create xp:panel and define your data source. You can use xe:dialogContent and xe:dialogButtonBar to organize the rest of the content of the dialog.

<xe:dialog id="dialog1" title="Dialog title appears at top">
    <xp:panel>
        <xp:this.data>
            <xp:dominoDocument var="document1" formName="CustomerForm" ignoreRequestParams="true" action="editDocument">
                <xp:this.documentId><![CDATA[#{javascript:
                     // ssjs to return documentid or noteid, 
                 }]]></xp:this.documentId>
            </xp:dominoDocument>
        </xp:this.data>
        <xe:dialogContent id="dialogContent1">
            <xp:table>
                <xp:tr>
                    <xp:td>
                        <xp:label value="Address:" id="address_Label1" for="address1">
                        </xp:label>
                    </xp:td>
                    <xp:td>
                        <xp:inputText value="#{document1.Address}" id="address1" >
                        </xp:inputText>
                    </xp:td>
                </xp:tr>
                <xp:tr>
                    <xp:td>
                        <xp:label value="City:" id="city_Label1" for="city1">
                        </xp:label>
                    </xp:td>
                    <xp:td>
                        <xp:inputText value="#{document1.City}" id="city1" >
                        </xp:inputText>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xe:dialogContent>
        <xe:dialogButtonBar id="dialogButtonBar1">
            <xp:button value="Close Dialog" id="button1">
                <xp:eventHandler event="onclick" submit="false">
                    <xp:this.script><![CDATA[XSP.closeDialog("#{id:dialog1}");]]> 
                    </xp:this.script>
                </xp:eventHandler>
            </xp:button>
        </xe:dialogButtonBar>
    </xp:panel>
</xe:dialog>

You can open and close using csjs:

  XSP.openDialog("#{id:dialog1}");
  XSP.closeDialog("#{id:dialog1 }" );

Or use ssjs:

 getComponent("dialog1").show();
 getComponent("dialog1").hide();