如何使用Twitter Bootstrap中的popover显示图像？
如何使用Twitter Bootstrap中的popover显示图像？
提问于 2012-06-18 07:19:14
Twitter Bootstrap的popover功能的典型示例是带有标题的类固醇工具提示。
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>我想使用弹出窗口来显示图像。这个是可能的吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-06-19 02:13:46
非常简单:)
<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 });Stack Overflow用户
发布于 2012-08-31 13:01:56
有点类似于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>Stack Overflow用户
发布于 2014-02-11 19:15:41
简单的生成链接:) 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')+"'>";
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11075560
复制相关文章
相似问题