Create a simple modal pop-up window in XSLT

Question

I am building a style sheet that has a few Members in the table. What I want is when I click on each Member a pop-up modal window to open with that Member's data which is in the XML file (I can use Member ID for reference). I tried to use fancybox (http://fancybox.net/) but the problem with that is, these Members are populated dynamically from the XML and when I click on one Member it opens pop-up with data from some other Member.

XML

<Members>
<Member Name = “John Smith” MemberNumber = “JS001” DateofBirth = “09/01/1978” Gender = “Male”/>
<Member Name = “Andy Rodrigues” ” MemberNumber = “AR001” DateofBirth = “05/01/1970” Gender = “Male”/>
<Member Name = “Julie Dean” ” MemberNumber = “JD001”  DateofBirth = “05/01/1970” Gender = “Male”/>
</Members>

**Stylesheet**
Member Name             Member Number   
[John Smith][1]         JS001
[Andy Rodriguez][1]     AR001
[Julie Dean][1]         JD001

**Pop-up**
Member            John Smith
Date of Birth     09/01/1978
Gender            Male

Member Names on the stylesheet are links that should open popups with Member information like date of birth and gender.

My code sample using FancyBox:

 <xsl:for-each select="Members/Member">
    <tr>
      <td>

        <div class="indicator bck-belize-hole brd-peter-river">
          <xsl:element name="a">
            <xsl:attribute name="href">#inline_DTRXMLInfo</xsl:attribute>
            <xsl:attribute name="class">various moreinfo whiteicon</xsl:attribute>

            <xsl:value-of select="@Name"/>
          </xsl:element>

        </div>
        <xsl:value-of select="@Name"/>

      </td>
      <td >
        <font face="Arial" size="2" color="black">
          <b>
            <xsl:value-of select="@MemberNumber"/>
          </b>
        </font>
      </td>
    </tr>
    </xsl:for-each>
  <div class="fancynone">

  <div id="inline_DTRXMLInfo" class="fancysize">
    <xsl:call-template name="DTRXMLInfo">

      <xsl:with-param name="Date Of Birth" select="DateofBirth"></xsl:with-param>

    </xsl:call-template>
  </div>

You mean something like this: https://jsfiddle.net/robertrozas/vg3hr3fh/ — Hackerman, Dec 30 '15 at 18:48
More like this: http://jsfiddle.net/uKaBH/ (click on DiscountDetails) — Ankit Vora, Dec 30 '15 at 19:23
Fixed code: https://jsfiddle.net/robertrozas/vg3hr3fh/ ...happy new year :) — Hackerman, Dec 30 '15 at 19:38
I see you hard coded XML however in my case I just have a path to the XML which I can use. Like Members/Member[@Name] — Ankit Vora, Dec 30 '15 at 20:12
I'm not a wizard man....i'm just trying to guide me with the little info provided by you...if you want a more specific approach, you need to be more specific too...your question remains unclear for all of us — Hackerman, Dec 30 '15 at 20:23
It's alright, appreciate your help. This is very close to what I am trying to do: http://stackoverflow.com/questions/19006569/how-to-create-a-modal-popup-message-from-xsl — Ankit Vora, Dec 30 '15 at 20:28
To support dynamically added elements in fancybox v1.3.x check http://stackoverflow.com/a/9084293/1055987 — JFK, Dec 31 '15 at 16:59

score 2 · Accepted Answer · edited Jan 11 '16 at 09:00

Solution:

Since the Members are added to the stylesheet on the fly, we have to give <div> inline_DTRXMLInfo a unique ID which can be achived by appending MemberNumber to the <div> ID.

Code:

 <xsl:attribute name="href">#inline_DTRXMLInfo_<xsl:value-of select="@MemberNumber"/></xsl:attribute>

<div id="inline_DTRXMLInfo_{$MemberNumber}" class="fancysize">
    <xsl:call-template name="DTRXMLInfo">

      <xsl:with-param name="Date Of Birth" select="DateofBirth"></xsl:with-param>

    </xsl:call-template>
  </div>

Create a simple modal pop-up window in XSLT

1 Answers1

Linked