XSL XML：添加模式弹出窗口

Question

Here is the xml:

<?xml version="1.0" encoding="UTF-8"?>
<file>
    <text>
        <title>Header1</title>
        <content>
            <p>
                <sentence>I bought <fruit>kiwi</fruit> at the grocery store.</sentence>
                <sentence>I also bought <fruit>bananas</fruit> at the store.</sentence>
            </p>
            <p>
                <sentence>She bought <fruit>kiwi</fruit> at the grocery store.</sentence>
                <sentence>She also bought <fruit>bananas</fruit> at the store.</sentence>
            </p>
        </content>
        <footer>Footer1</footer>
    </text>
    <text>
        <title>Header2</title>
        <content>
            <p>
                <sentence>He bought <fruit>pears</fruit> at the grocery store.</sentence>
                <sentence>He also bought <fruit>lemons</fruit> at the store.</sentence>
            </p>
            <p>
                <sentence>You bought <fruit>pears</fruit> at the grocery store.</sentence>
                <sentence>You also bought <fruit>lemons</fruit> at the store.</sentence>
            </p>
        </content>
        <footer>Footer2</footer>
    </text>
</file>

I'm trying to add a modal popup that appears when clicking on a <sentence> and display the entire <content> in the modal popup along with the header and footer. I have the following xsl that doesn't display any <sentence> s after adding Modal Content <div> s. Also, how can I pass a unique ID to Modal Content, so that it displays the correct <content> where the <sentence> belongs?

<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

        <xsl:template match="/">
                    <xsl:apply-templates select="file/text/content/p"/>
    </xsl:template>

<xsl:template match="fruit">
<span style="color:red;">
<xsl:apply-templates/>
</span>
</xsl:template>

<xsl:template match="sentence[fruit]">
<p id="myBtn" onclick="myBtn()">
<xsl:apply-templates/>
</p>

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
<h2>
<xsl:value-of select="file/text/title"/>
</h2>
</div>
<div class="modal-body">
<p><xsl:value-of select="file/text/content"/>
</p>
</div>
<div class="modal-footer">
<h3>
<xsl:value-of select="file/text/footer"/>
</h3>
</div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the sentence, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

</xsl:template>

</xsl:stylesheet>

Answer 1

When using an XPath such as

select="file/text/title"

You're saying "from the current element, select its child file, from here its child text, and from here its child title".

But file is not a child of sentence, so you're not selecting anything.

You need to select "the title element which is in the same text element as the current element". And that is

select="ancestor::text/title"

Also, how can I pass a unique ID to Modal Content

You could leverage generate-id():

id="{generate-id()}"

or you could count how many sentences you've been through so far:

id="modal{count(preceding::sentence)}"