在同一窗口中将图像显示为弹出窗口

时间:2020-05-20 03:04:51

标签: html css angularjs angular angularjs-scope

这是我的第一个问题。请忍受我。

我有一个表,其中一列显示图像,而不是在表的列中显示图像,而是当用户单击“查看图像”时,我想在同一窗口上将其更改为弹出图像。我尝试使用windows.open(imgSrc),新窗口弹出(我没有要打开的新窗口)和图像下载。我附上了我的部分代码。请帮助我。

身体

<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;
}

在表格列中显示图像的代码

<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;
}

1 个答案:

答案 0 :(得分:1)

您要将图像传递到window.open,这将打开一个新的浏览器窗口,这就是工作,您正在寻找一种模式来打开图像。

我建议尝试Modaal并根据页面上的“单图像模式”示例修改代码。