How to Open SharePoint List Hyperlink Column in Modal Popup Window

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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
     //In SharePoint OOTB list view, all 'td' will have this class 'ms-cellstyle'
     $("td.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
     };
     SP.UI.ModalDialog.showModalDialog(options);
 }
 function silentCallback(dialogResult, returnValue) {
 }
 function refreshCallback(dialogResult, returnValue) {
     SP.UI.Notify.addNotification('Operation Successful!');
     SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
 }
 </script>

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

Ahamed