How to use custom hyperbutton in the listveiw for each item with Popup

I am using JS Link CSR file to show the hyperlink in the ListView for each item and open a form in module popup window.

code is below:

(function () { 

    // Create object that have the context information about the field that we want to change it's output render  
    var publishFiledContext = {}; 
    publishFiledContext.Templates = {}; 
    publishFiledContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Publish": { "View": publishFiledTemplate } 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(publishFiledContext); 

})(); 

// This function provides the rendering logic for list view 
function publishFiledTemplate (ctx) { 

    var strHTML = "";
    var itemId = ctx.CurrentItem.ID;
    var itemTitle = ctx.CurrentItem.Title;
    var rootPath=ctx.HttpRoot;
    var listName=ctx.ListTitle;
    strHTML += "<a id='click"+itemId+"' href='#' onclick='return openDialog(\""+itemTitle+"\",\""+itemId+"\",\""+rootPath+"\",\""+listName+"\");'>Publish</a>"; 
                
    return strHTML ;
    

} 

  
// This function used to open the form in dialog window as a popup

function openDialog(title,itemId,rootPath,listName)
{
    var options = SP.UI.$create_DialogOptions();
    options.title = title;
    options.width = 800;
    options.height = 700;
    options.url = rootPath+"/Lists/"+listName+"/DispForm.aspx?ID="+itemId;
    SP.UI.ModalDialog.showModalDialog(options);

    return false;
}

Please save this as a js file in "style library" and give that url in the listview webpart at "JS Link" property. the reference link should be "~sitecollection/Style Library/js/ViewHref.js"