How to Open SharePoint List Hyperlink Column in Modal Popup Window

Ahamed Fazil Buhari
 
Senior Developer
January 14, 2017
 
Rate this article
 
Views
22780

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

image

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.

image

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

image

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

image

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

 

Happy Coding

Ahamed

Author Info

Ahamed Fazil Buhari
 
Senior Developer
 
Rate this article
 
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint, Azure, M365, SPFx, .NET and client side scripting - JavaScript, TypeScript, ...read more
 

Leave a comment