SharePoint 2013 Modal Dialog in Display Template

Question

I am working on a custom action in the item_commonhoverpanel_actions display template that links to the item properties (dispform.aspx) of the item. So far it's working, however I would like to show the item properties in a modal dialog through the onclick event. So far I am not able to get this done. Below is my code that adds a custom action to the hover panel.

<!--#_ var viewDocumentUrl = ctx.CurrentItem.ParentLink;
viewDocumentUrl = viewDocumentUrl.replace("AllItems.aspx","");
var viewDocumentHtml = String.format('<a href="{0}DispForm.aspx?id={1}" title="{3}">VIEW PROPERTIES</a>',
                                                $htmlEncode(viewDocumentUrl), $htmlEncode(ctx.CurrentItem.ListItemID), $htmlEncode(ctx.CurrentItem.Title));
_#-->

Now what I would like to do is add an onlick="show modal dialog". I can't find a solution to this. Is it even possible to place an onclick within a String.format? I am not a javascript expert so any help is appreciated.

Thanks

Answer 1

You can use SharePoint's SP.UI.ModalDialog to achieve your goal. You can read about it further here.

<script>

function redirectToURL()
{
    //Using the DialogOptions class.
    var options = SP.UI.$create_DialogOptions();

    options.title = "My Dialog Title";
    options.width = 400;
    options.height = 600;
    options.url = "/_layouts/DialogPage.aspx";

    SP.UI.ModalDialog.showModalDialog(options);

    //Using a generic object.
    var options = {
        title: "My Dialog Title",
        width: 400,
        height: 600,
        url: "/_layouts/DialogPage.aspx" };

    SP.UI.ModalDialog.showModalDialog(options);
}
</script>
<button onclick="redirectToURL()">Redirect me</button>

In the url option you can pass the url of the display form you are trying to redirect the user to.

Answer 2

<button onclick="javascript:popup(); return false;">Modal</button>

function popup(){
 SP.UI.ModalDialog.showModalDialog({ 
            url: "URL of List", 
            title: "Title of page", 
            allowMaximize: true, 
            showClose: true, 
            width: 850, 
            height: 600, 
            dialogReturnValueCallback: newCallback 
        });
function newCallback(dialogResult, returnValue) { 
   SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK); 
}
}