How to show details from web part as pop up window

Question

Hello
I designed few web pages in SharePoint Designer 2010 and trying to customize it. I have a XSLTListView web part that is displaying filtered data from the external SQL database. When user choses the item from this list, I need it to show in the new pop
up window. I can't seem to find the way to do it. Saw multiple references to use SP.UI.ModalDialog.ShowPopupDialog(url), but I don't know how and where to incorporate it, since there is no place in the page where it actually specifies that url
of the page that I need to show as pop up.
Below there is a code for the XsltListWebPart, where I'm hoping I could make changes to make it pop up (it seems that this is the part that is calling the display details form). The form that I'd like to pop up is DispForm.aspx
<script>
function showpreview<xsl:value-of select="$ViewCounter" />(o) {
count = 1;
for(i = 0; i &lt; o.childNodes.length; i++)
var child = o.childNodes[i];
if (child.style.display == &quot;none&quot; &amp;&amp; child.tagName == &quot;DIV&quot;)
f = document.getElementById(&quot;n&quot; + count + &quot;<xsl:value-of select="$WPQ" />&quot;);
f.innerHTML = unescape(child.innerHTML) + &apos;&#160;&apos;;
count ++;
</script>
<div id="previewpaneerror{$ViewCounter}" style="width: 801px"></div>
<table cellspacing="0" cellpadding="0" border="0" id="previewpanetable{$ViewCounter}" dir="{List/@Direction}">
<xsl:choose>
<xsl:when test="not($dvt_RowCount=0)">
<tr>
<td valign="top" style="width: 186px">
<div class="ms-ppleft" style="width: 100px">
<table cellspacing="0" cellpadding="0" border="0" style="width: 122%">
<xsl:apply-templates select="." mode="RenderView"/>
</table>
</div>
</td>
<td valign="top">
<div id="preview1{generate-id()}" class="style2" style="width: 690px; margin-left: 30px;">
<table border="0" cellpadding="0" cellspacing="0">
<xsl:for-each select="ViewFields/FieldRef[not(@Explicit='TRUE')]">
<tr>
<td nowrap="nowrap" valign="top" class="ms-formlabel" style="width: 143px">
<nobr>
<xsl:value-of select="@DisplayName"/>
</nobr>
</td>
<td valign="top" class="ms-formbody" id="n{position()}{$WPQ}" style="width: 370px">
</td>
</tr>
</xsl:for-each>
</table>
</div>
</td>
</tr>
</xsl:when>
<xsl:otherwise>
<tr>
<td class="ms-vb">
<table class="ms-summarycustombody" cellpadding="0" cellspacing="0" border="0">
<xsl:call-template name="EmptyTemplate" />
</table>
</td>
</tr>
<tr>
<td height="5">
<img src="/_layouts/images/blank.gif" width="1" height="5" alt="" />
</td>
</tr>
</xsl:otherwise>
</xsl:choose>
</table>
</xsl:template>
Alla Sanders

Answer 1

Hi Alla,
You can show details from web part as pop up window using JavaScript with SP.UI.ModalDialog.ShowPopupDialog(url). Here is a demo you can refer to:
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var obj1=$("a[id='forum0-NewPostLink']");
url="http://sp13"+obj1.attr("href");
//alert(url);
obj1.removeAttr("href");
obj1.click(function(){
openDialogBox(url);
function openDialogBox(url) {
var pageUrl=url;
var title="New Discussion";
SP.UI.ModalDialog.showModalDialog(
url: pageUrl,
autoSize: true,
title: title,
dialogReturnValueCallback: function (result){
if(result== SP.UI.DialogResult.OK){
//refresh parent window
window.location.href=window.location.href;
</script>
Reference:
https://social.technet.microsoft.com/Forums/en-US/f18062ed-2e17-440e-8e00-2904f5316802/discussion-board-forum-opens-in-other-page?forum=sharepointdevel
Best Regards,
Eric
Eric Tao
TechNet Community Support