HTML 引导弹出框函数

HTML bootstrap popover function

本文关键字：函数 HTML      更新时间：2023-09-26

我想知道引导程序给出的弹出窗口，我有以下事情 - 

<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>

截至目前，当我点击图片时，我在同一行上同时获得联合总裁和 sample@uic.edu。如何使它们出现在不同的行上。

谢谢

一种方法是将引导弹出框内容设为 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();
    }
});

小提琴

相关文章：