我想知道 bootstrap 给出的 popover 我有以下东西 -
<a href="javascript: void(0)" id="member1" rel="popover" data-content="Co-President sample@uic.edu" data-original-title="Liz Sample"><img src="femaleprofilepicture2.jpg" class="img-polaroid"></a>
截至目前,当我点击图片时,我会在同一行看到 Co-President 和 sample@uic.edu。如何让它们出现在不同的行上。
谢谢
最佳答案
实现此目的的一种方法是将 Bootstrap 弹出窗口内容设为 html 并将 html 设置为 true 并提供 <br/>
介于两者之间:
data-content="Co-President <br/> sample@uic.edu"
和 data-html="true"
即:
<a href="javascript: void(0)" id="member1" data-placement="bottom" rel="popover" data-content="Co-President <br/> sample@uic.edu" data-html="true" data-original-title="Liz Sample"><img src="femaleprofilepicture2.jpg" class="img-polaroid"/></a>
但最好单独创建 html 内容并通过选项将其填充到弹出窗口中。
像这样:
HTML:
<a href="javascript: void(0)" id="member1" data-contentwrapper=".mycontent" rel="popover"><img src="femaleprofilepicture2.jpg" class="img-polaroid"/></a>
<div class="mycontent"> <!-- Here i define my content and add an attribute data-contentwrapper t0 a selector-->
Co-President <br/>
sample@uic.edu
</div>
JS:
$('[rel=popover]').popover({
html:true,
placement:'bottom',
content:function(){
return $($(this).data('contentwrapper')).html();
}
});
关于javascript - HTML bootstrap popover 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18861957/