Display image as popup on same window

Question

This is my first question. Please bear with me.

I have a table in which one of the column displays images, instead of displaying image in the column of table i want to change as popup image on the same window when user clicks View Image. I tried using windows.open(imgSrc), the new window popup(i don't new window to open) and image is downloaded. I attached piece of my code. Please help me.

Body

<td data-title='"Background Image"' header-class='text-left'><a href="#" ng-click="Page.Functions.GetBackgroundImageUrl(item)">View Image</a></td>

JS

$scope.Page.Functions.GetBackgroundImageUrl = function (hero) {

    if (hero && hero.BackgroundImageExist) {

        var v = $scope.Page.Functions.GetDataVersion(hero.Id);
        if (v) {
            v = '?v=' + v;
        }

        window.open(ENV.apiUri + 'HomePageHero/BackgroundImage/' + hero.Id + v, "window Title", "width = 500, height = 450");
    }

    return null;
}

Code to display image in the table column

<td data-title='"Background Image"' header-class='text-left'><display-media model='Page.Functions.GetBackgroundImageUrl(item)'></display-media></td>

JS

$scope.Page.Functions.GetHtmlText = function (rawText) {
    return $sce.trustAsHtml(rawText);
}

$scope.Page.Functions.GetBackgroundImageUrl = function (hero) {

    if (hero && hero.BackgroundImageExist) {
        var v = $scope.Page.Functions.GetDataVersion(hero.Id);
        if (v) {
            v = '?v=' + v;
        }
        return 'imageUrl:' + ENV.apiUri + 'HomePageHero/BackgroundImage/' + hero.Id + v;
    }

    return null;
}

Answer 1

You're passing the image to window.open which will open a new browser window, that's it's job, you're looking for a modal to open the image.

I suggest trying Modaal and adapting your code based on the Single Image Modal example on the page.