URL > modal dialox box in Sharepoint 2016

Question

I have a created a list via the Promoted List chart which contains the LinkLocation as the URL for the specific file. When viewing the list in the TILE view, it opens the links in modal box but when changing to normal chart view > the link opens in a new browser.

I have used the following suggestions but did not manage to get it working: how to open hyperlink list item in modal dialog box

Field=LinkLocation << is the URL field's name in ListSettings

Java Script used:

<script type="text/javascript">
var links=getElementByLinkLocation("a","LinkLocation");
var origin=links;
var temp="javascript:OpenPopUpPage('" + origin + "', null, 640, 480)";
links.href=temp;
function getElementByLinkLocation(tagName,elementTitle){
var elementTag;
var els=document.getElementsByTagName(tagName);
var elsLen=els.length;
var pattern=new RegExp("(^|\\s)" + elementTitle + "(\\s|$)");
for (var i=j=0; i < els.length; i++){
if (elementTitle.toUpperCase()==els[i].title.toUpperCase()){
elementTag=els[i];
j++;
}}
return elementTag;
} 
</script>

Anyone who can recommend me another method, please?

Answer 1

Try following JS code to open SP Modal Dialog.

function ShowURL() {  
var options = {  
url: 'your url goes here',  
tite: 'Title for Modal',  
allowMaximize: false,  
showClose: true,  
width: 430,  
height: 230  
};  
SP.UI.ModalDialog.showModalDialog(options);  
return false;  
}

Edit

Use the following steps:

1. Open the All Item (Chart view) View.
2. Click on the gear icon and select Edit page.
3. Now click on add web part and from Group select Media and Content and from Web Part section select Script Editor web part.
4. Copy past the following script into the script editor. Make sure you change the view attribute in following code to the view id of your table, which can be obtain by just inspecting the table element.

Code:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        $('tbody td a', 'table[view="33EBAF5B-D09E-471C-933B-xxxxxxxxxxx"]').each(function (index) {
            var url = $(this).prop('href');
            $(this).removeAttr('href');
            $(this).attr('onClick', 'ShowURL("'+ url + '")');
        });
    })

    function ShowURL(url) {
        var options = {
            url: url,
            tite: 'Title for Modal',
            allowMaximize: false,
            showClose: true
        };
        SP.UI.ModalDialog.showModalDialog(options);
        return false;
    }

</script>

You need to replace view id in this statement table[view="33EBAF5B-D09E-471C-933B-xxxxxxxxxxx"] to make it work for you.