如何使用 Twitter Bootstrap 中的弹出框显示图像?

Posted

技术标签:

【中文标题】如何使用 Twitter Bootstrap 中的弹出框显示图像?【英文标题】:How do I use popover from Twitter Bootstrap to display an image? 【发布时间】:2012-06-19 23:49:24 【问题描述】:

Twitter Bootstrap 弹出框功能的典型示例是带有标题的类固醇工具提示。

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>

我想使用 popover 来显示图像。这可能吗?

【问题讨论】:

请参考此链接。通过使用它,我认为您也应该能够显示图像。 http://***.com/questions/8494291/can-i-use-html-tags-in-twitter-bootstrap-popover- data-content 【参考方案1】:

非常简单:)

<a href="#" id="blob" class="btn large primary" rel="popover">hover for popover</a>

var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';

$("#blob").popover( title: 'Look! A bird!', content: img, html:true );

http://jsfiddle.net/weuWk/

【讨论】:

html:true 是正确呈现 html 所必需的 :( 添加trigger: 'hover'后为我工作【参考方案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"   /></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>

【讨论】:

【参考方案3】:

生成链接很简单:) 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/

【讨论】:

【参考方案4】:

这是我用的。

$('#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>

【讨论】:

【参考方案5】:

这里我有一个 Bootstrap 3 弹出框的示例,当鼠标悬停在某些文本上时,它会显示带有标题的图像。我添加了一些内联样式,您可能想删除或更改它们.....

这在移动设备上也很有效,因为第一次点击会弹出图像,第二次点击会打开链接。 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/

【讨论】:

能否请您详细说明您的答案,添加更多关于您提供的解决方案的描述? 当然。你想知道什么? 很好的答案。如果您使用的是 AngularJS,那么 JavaScript 需要包含在控制器初始化回调中,这可能一文不值,否则它将无法工作。

以上是关于如何使用 Twitter Bootstrap 中的弹出框显示图像?的主要内容,如果未能解决你的问题,请参考以下文章

Twitter Bootstrap 中的导航栏颜色

twitter bootstrap 中的五个相等的列

如何创建可打印的 Twitter-Bootstrap 页面

Twitter Bootstrap - 如何水平或垂直居中元素

twitter bootstrap问题:右对齐下拉标题中的插入符号

在 CSS 中使用 Twitter Bootstrap 字形图标