I was working on a requirement to
open list items in Modal dialog listed in Content Query Web Part.
So what we need to do here is just remove
href attribute and adding onclick event to call ModalDialog and open the url
(SafeLinkUrl). Also added onmouseover event to show hand as cursor when mouse
over on the text.
<a onclick="javascript:SP.UI.ModalDialog.ShowPopupDialog('{$SafeLinkUrl}');
return false;" onmouseover="javascript:this.style.cursor='hand';"
title="{@LinkToolTip}">
Here
are the steps
- Open the root site with in SharePoint designer and go to All items > Style library> XSL Style Sheets.
- Open ItemStyle.xsl file and edit it (take the backup to be safe)
- Paste below section to the end of the file just above </xsl:stylesheet>.
<xsl:template name="ModalDialogBullets"
match="Row[@Style='ModalDialogBullets']"
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="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>
<div class="item link-item
bullet">
<xsl:call-template
name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<a onclick="javascript:SP.UI.ModalDialog.ShowPopupDialog('{$SafeLinkUrl}');
return false;" onmouseover="javascript:this.style.cursor='hand';"
title="{@LinkToolTip}">
<xsl:value-of
select="$DisplayTitle"/>
</a>
</div>
</xsl:template>
4.
Save the file and check it in.
5.
You need to update the ItemStyle of CQWP
and apply this one. Edit CQWP > Presentations
> ItemStyle.
That’s all. Hope this Help.
