在同一窗口上显示图像作为弹出窗口

Posted

技术标签:

【中文标题】在同一窗口上显示图像作为弹出窗口【英文标题】:Display image as popup on same window 【发布时间】:2020-09-06 07:16:58 【问题描述】:

这是我的第一个问题。请多多包涵。

我有一个表格,其中一个列显示图像,而不是在表格的列中显示图像,我想在用户单击查看图像时将其更改为同一窗口上的弹出图像。我尝试使用 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;

【问题讨论】:

看起来你正在使用 AngularJS。如果你也在使用 Bootstrap,这个答案可能有用***.com/questions/29921441/… 【参考方案1】:

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

我建议尝试Modaal 并根据页面上的单图像模式示例调整您的代码。

【讨论】:

以上是关于在同一窗口上显示图像作为弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章

在弹出窗口上预览图像,无法正确显示

Jcrop - 弹出窗口中图像尺寸较小的问题

如何在同一网页上有不同的视频弹出窗口?

jQuery:如何在缩略图的单击上显示图像弹出窗口?

在弹出窗口中显示多个图像

在fancybox 2的弹出窗口中显示上一个和下一个图像