How to open popup dialog in ItemStyle.XSL?

Question

I have a custom ItemStyle.xsl in SharePoint 2019, and I need to open a SharePoint Modal PopUp Dialog window in ItemStyle.xsl when a link was clicked.

<a href="{@TwitterAccount}"><xsl:value-of  select="@Title" disable-output-escaping="yes" /></a> 

My SharePoint cusotm style in ItemsStye.XSL is

<xsl:template name="UserProfile" match="Row[@Style='UserProfile']" mode="itemstyle">
		<xsl:variable name="SafeLinkUrl">
			<xsl:call-template name="OuterTemplate.GetSafeLink">
				<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
			</xsl:call-template>
		</xsl:variable>
		<xsl:variable name="SafeImageUrl">
			<xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
				<xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
			</xsl:call-template>
		</xsl:variable>
		<xsl:variable name="DisplayTitle">
			<xsl:call-template name="OuterTemplate.GetTitle">
				<xsl:with-param name="Title" select="@Title"/>
				<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
			</xsl:call-template>
		</xsl:variable>

		<a href="{@TwitterAccount}"><xsl:value-of  select="@Title" disable-output-escaping="yes" /></a> 

</xsl:template>

How to open Modal Pop up Dialog window in SharePoint ItemStyle.XSL?

Answer 1

How to show SharePoint Modal Popup Dialog in ItemStyle.XSL file?

To show a Popup dialog in SharePoint ItemStyle.XSL file, you have to use SP.UI.ModalDialog.showModalDialog as the following:

1. Create a JS file, and add the below code

    <script language = "javascript">
         function openpopupDialog(pageUrl) { var options = { url: pageUrl, allowMaximize: true, showClose: true,  width: 700,  height: 700};
              SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options); }
    </script>
   

   Set the Width and Height as you prefer

2. Upload the JS file to Site Assets or Style Library.
3. Open SharePoint Designer, Open your Site and Navigate to Master Page.
4. Edit the HTML file for your Master Page, and attach the newly created JS file.
5. Check-in and publish your Master Page.
6. Go back to open the ItemStyle.XSL file, Check out, and Edit file in Advanced Mode.

7. In your Custom Item Style, and specifically in the Hyperlink tag, add the following

    <a href="{$SafeLinkUrl}" onclick="openpopupDialog('{$SafeLinkUrl}'); return false;" title="debug.to">
        <xsl:value-of  select="@Title" disable-output-escaping="yes" /></a>
   

8. Check-in and Publish your Item Styel.xsl file.
9. Go to your page, and add a Content Query Webpart, and configure it with your custom style.
10. Test your link now, that should be open in a Modal Pop up dialog as shown below
    

    If the Modal Popup Dialog is not working as expected, so you have to ensure that you have referenced the JS code correctly.
    For more details, Please check Open URL in SharePoint Modal PopUp Dialog