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.


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 '15 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 '15 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 '15 at 9:42
  • @Ruchi: You will have to write something like "<a href=\"javascript:openDialog('" + url + "')\>". – Naveen Mar 10 '15 at 9:59
  • it is not working. Please suggest any other way.. – Ruchi Mar 10 '15 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 '16 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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