如何使用Twitter Bootstrap的popup窗口来显示图片？

Twitter Bootstrap的popoverfunction的典型例子是类似于标题类固醇的工具提示。

HTML：

<a href="#" id="blob" class="btn large primary" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A title">hover for popover</a> 

JS：

 <script> $("#blob").popover({offset: 10}); </script> 

我想使用popup窗口来显示图像。 这可能吗？

Answer 1

很简单 ：）

 <a href="#" id="blob" class="btn large primary" rel="popover">hover for popover</a> var img = '<img src="https://si0.twimg.com/a/1339639284http://img.dovov.comthree_circles/twitter-bird-white-on-blue.png" />'; $("#blob").popover({ title: 'Look! A bird!', content: img, html:true }); 

http://jsfiddle.net/weuWk/

Answer 2

有点类似于mattbtay所说的，但有一些变化。 需要html：true。
把这个脚本放在页面底部靠近身体的标签。

 <script type="text/javascript"> $(document).ready(function() { $("[rel=drevil]").popover({ placement : 'bottom', //placement of the popover. also can use top, bottom, left or right title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover. add some basic css html: 'true', //needed to show html of course content : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really. }); }); </script> 

那么HTML是：

 <a href="#" rel="drevil">mischief</a> 

Answer 3

这是我用的。

 $('#foo').popover({ placement : 'bottom', title : 'Title', content : '<div id="popOverBox"><img src="http://i.telegraph.co.uk/multimedia/archive/01515/alGore_1515233c.jpg" /></div>' }); 

和HTML

 <b id="foo" rel="popover">text goes here</b> 

Answer 4

简单与生成的链接:) html：

 <span class='preview' data-image-url="imageUrl.png" data-container="body" data-toggle="popover" data-placement="top" >preview</span> 

JS：

 $('.preview').popover({ 'trigger':'hover', 'html':true, 'content':function(){ return "<img src='"+$(this).data('imageUrl')+"'>"; } }); 

http://jsfiddle.net/A4zHC/

Answer 5

在这里，我有一个Bootstrap 3 popover的例子，当鼠标hover在某些文本上时，它显示一个图片，上面有一个图片。 我已经提出了一些内联样式，你可能想要拿出或改变…..

这也适用于移动设备，因为图像会在第一次点击时popup，链接将在第二次点击。 HTML：

 <h5><a href="#" title="Solid Tiles Template" target="_blank" data-image-url="http://s29.postimg.org/t5pik8lyf/tiles1_preview.jpg" class="preview" rel="popover" style="color: green; font-style: normal; font-weight: bolder; font-size: 16px;">Template Preview 1 <i class="fa fa-external-link"></i></a></h5> <h5><a href="#" title="Clear Tiles Template" target="_blank" data-image-url="http://s9.postimg.org/rdonet7jj/tiles2_2_preview.jpg" class="preview" rel="popover" style="color: red; font-style: normal; font-weight: bolder; font-size: 16px;">Template Preview 2 <i class="fa fa-external-link"></i></a></h5> <h5><a href="#" title="Clear Tiles Template" target="_blank" data-image-url="http://s27.postimg.org/8scrcdu9v/tiles3_3_preview.jpg" class="preview" rel="popover" style="color: blue; font-style: normal; font-weight: bolder; font-size: 16px;">Template Preview 3 <i class="fa fa-external-link"></i></a></h5> 

JS：

 $('.preview').popover({ 'trigger':'hover', 'html':true, 'content':function(){ return "<img src='"+$(this).data('imageUrl')+"'>"; } }); 

https://jsfiddle.net/pepsimax_uk/myk38781/3/