I have created a datagrid using javascript. In that I am displaying top 4 items of my sharepoint list. Now I want to open hyperlink list item in modal dialog box on the click of that hyperlink. Please suggest javascript or jquery approach.


3 Answers 3


To open the view item form you need to open DispForm.aspx page for the List Item in a Modal Dialog. The URL for the list item will be something like http://server/Lists/ListName/DispForm.aspx?ID=1 where ID is the list item ID. To open it in a modal dialog use the following code snippet.

function openDialog(pageUrl) {  
       url: pageUrl,
       width: 500,  
       height: 500,  
       title: "Title of the Dialog"  

The above snippet has been taken from here.

You can also look at these:

  • Thnks Naveen. But I want to open modal dialog on the click of the list item hyperlink which is already getting displayed on page load. When and how should I called this function that u have written ?
    – Ruchi
    Mar 10, 2015 at 9:20
  • @Ruchi: You would be requried to call the openDialog from <a> tag. You can do this via href="javascript:openDialog()" or onclick="openDialog()". You will have to contruct the URL based by supplying server name, list name and ID of the list item.
    – Naveen
    Mar 10, 2015 at 9:35
  • Naveen here is my code that adds list items on the datagrid function AddRowToTable1(name, modified, ID) { var url = "synpunspd0177:23598/Lists/Broadcasts/DispForm.aspx?ID=" + ID; $("#BroadcastsdataTable").append('<tr>' + '<td class="tablenews"> <a href= ' + url + '>' + name + '</a> ' + modified + ' </td>' + '</tr>'); How to open list items that are displaying in datagrid as modal popup when clicked
    – Ruchi
    Mar 10, 2015 at 9:42
  • @Ruchi: You will have to write something like "<a href=\"javascript:openDialog('" + url + "')\>".
    – Naveen
    Mar 10, 2015 at 9:59
  • it is not working. Please suggest any other way..
    – Ruchi
    Mar 10, 2015 at 10:46

You need to ensure that the relevant file (SP.UI.Dialog.js) has been loaded first.

function openDialog(pageUrl) { 
var options = {
    url: pageUrl,
    title: 'Title of the Dialog',
    allowMaximize: false,
    showClose: true,
    width: 500,
    height: 500
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);       

Here is a posting with some additional useful details: Tips & Tricks: SharePoint 2013 Modal Dialogs


This JavaScript should inject the PopUp code in your page, affecting all link tags:

var links=getElementByTitle("a","linkTitle");
var origin=links;
var temp="javascript:OpenPopUpPage('" + origin + "', null, 640, 480)";

function getElementByTitle(tagName,elementTitle){
    var elementTag;
    var els=document.getElementsByTagName(tagName);
    var elsLen=els.length;
    var pattern=new RegExp("(^|\\s)" + elementTitle + "(\\s|$)");
    for (var i=j=0; i < els.length; i++){
        if (elementTitle.toUpperCase()==els[i].title.toUpperCase()){
 return elementTag;
  • helped! thanks I just changed els[i].title.toUpperCase() to els[i].text.toUpperCase()
    – Taran Goel
    May 31, 2016 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.