How to Open SharePoint List Hyperlink Column in Modal Popup Window

Ahamed Fazil Buhari
Senior Developer
Published On :   14 Jan 2017
Visit Count
Today :  3    Total :   10574

By default, SharePoint list - Hyperlink column value will open in new window or existing window when we click on the value, as show below


After clicking on any Link column (Hyperlink type) value, it will navigate to that URL and leave the current page. This would be frustrating just because you are navigated out from the current page. To avoid this, we can open this in Modal popup window by using the below simple script.

 <script type="text/javascript" src=""></script>
 <script type="text/javascript">
     //In SharePoint OOTB list view, all 'td' will have this class 'ms-cellstyle'
     $(" a").click(function () {   
         var currentURL = $(this).attr('href'); 
         var onclickVal = $(this).attr('onclick') || '';
         if(onclickVal == '') {
            currentURL = "javascript:ModalDailog('"+currentURL+"')";           
            $(this).attr('onclick', 'empty');     
            $(this).attr('href', currentURL);        
 //Function to open url in Modal Dailog
 function ModalDailog(urlvalue) {    
     var options = {
         url: urlvalue,
         width: 800,               
         allowMaximize: true,
         showClose: true,     
         dialogReturnValueCallback: silentCallback
 function silentCallback(dialogResult, returnValue) {
 function refreshCallback(dialogResult, returnValue) {
     SP.UI.Notify.addNotification('Operation Successful!');

Add the script editor web part or you can use some other way to embed this script that page.


After adding the script, click on any Hyperlink value in the list and it will open in Modal dialog window


We can change the size, title and other properties of the Modal dialog in the function ModalDailog(urlvalue).


I hope this would be helpful to you. Thank you for reading

Happy Coding