How to Open SharePoint List Hyperlink Column in Modal Popup Window


Ahamed Fazil Buhari
SharePoint Developer
Published On :   14 Jan 2017
Visit Count
Today :  3    Total :   1591
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

Sharegate: Kick-Ass Tool
Think Your SharePoint & Office 365 Are Secure ? Find Out Now!


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

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

SharePoint Analytics