Bootstrap弹出框，图片作为内容。

Question

我正在尝试做这件事：

$("a[rel=popover]").popover({
    html:       true,
    trigger:    'hover',
    content:    '<img src="'+$(this).data('img')+'" />'
});

但是它不起作用，因为$(this).data('img')无法正常工作。

我之所以这样做，是因为在data-content属性中使用模板和HTML会产生冲突。所以我把图像源放在一个data-img属性中，并希望获取它并将其放入img元素中。

我尝试过这样做，但并没有完全成功：

$("a[rel=popover_img]").popover({
    html:       true,
    trigger:    'hover',
    content:    '<img src="#" id="popover_img" />'
}).hover(function(){
    $('#popover_img').attr('src',$(this).data('img'));
});

我希望有人可以帮助我 :)

- Roy

Answer 1

当前情况下，this 引用的是当前作用域，而您想引用 Popover 实例附加到的元素。这可以通过将您对 content 的表达式简单地包装在函数中来完成：

$('a[rel=popover]').popover({
  html: true,
  trigger: 'hover',
  content: function () {
    return '<img src="'+$(this).data('img') + '" />';
  }
});

查看演示：

Plunker

- merv

---

当我尝试显示一个更大的图像，比如500x500像素时，是否存在弹出窗口的限制？弹出窗口边框没有围绕图像。 - Khrys

@Khrys 是的。Bootstrap有默认值：.popover { max-width: 276px; }。但是，它还有img { width: 100%; }，应该相应地缩放弹出内容。你描述的问题一定来自于冲突的CSS或自定义样式。 - merv

@merv，在您在Plunker中发布的示例中，第一张图片的尺寸为400x200，但是弹出框不允许它以这个分辨率显示...侧面的图片尺寸为200x100，但视觉上与第一张图片大小相同。第一张图片应该更大吗？谢谢 - Khrys

@Khrys CSS中的width: 100%表示图像的宽度应缩放以适应其父容器。因此，不，它不应该更大；它正在按设计进行操作。 - merv

对我来说，图片需要一秒钟才能落到位，这导致了弹出窗口出现了奇怪的问题。设置一个固定的高度帮助了我。$('a[rel=image-popover]').popover({ html: true, trigger: 'hover', placement: 'top', content: function(){return '';} }).on("show.bs.popover", function() { return $(this).data("bs.popover").tip().css({ height: "280px" }); }); - Abram

在演示的 Plunker 中，我的图片没有出现。 - giorgio79

Answer 2

对于Merv提出的方案的替代方案，为了简单起见，您可以将许多jQuery属性嵌入到HTML中，并将jQuery精简化例如

一个可行方案是将许多jQuery属性嵌入到HTML中，这样可以简化代码并减轻jQuery的负担。

<a href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<img src='http://localhost:15249/img1.jpg' width='200' />">Toggle popover</a>

并通过jquery调用弹出框

$('["popover"]').popover()

使用该方法时需要注意的是，data-html 应设置为 true，否则图像将被解释为文本而不是 HTML。

在这种方法中使用时要注意，data-html 必须设为true，否则图像会被视为文本而非HTML。

- Tolani

Answer 3

请尝试这个。

[html]

<a href="#"><i class="menu-icon fa fa-picture-o fa-3x" data-rel="popover" title="<strong>Hi, I'm Popover</strong>" data-placement="top" data-content="<img src='https://www.google.co.id/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' width=50% height=50%>"></i></a>

[javascript]

$(document).ready(function() {
$('[data-rel=popover]').popover({
  html: true,
  trigger: "hover"
});

})

[看这个] https://jsfiddle.net/j4qptkzr/20/

- Soesanto Salim