Twitter引导弹出窗口中的HTML

我试图在引导弹出框中显示HTML，但不知何故它不起作用。我在这里找到了一些答案，但对我来说不起作用。如果我做错了什么，请告诉我

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>

$（函数（）{
$（'[rel=popover]'）。popover（{
是的，
内容：函数（）{
返回$（'#popover_content_wrapper'）.html（）；
}
});
});

爆米花

这是您的div内容

您需要创建一个启用了html选项的popover实例（将其放在javascript文件中popover JS代码之后）：

---

$（'.popover with html'）.popover（{html:true}）

您不能使用

您可以使用属性
data html=“true”
：

我在列表中使用了一个弹出窗口，我通过HTML给出了一个示例

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>

我真的不喜欢把长HTML放在属性中，下面是我的解决方案，清晰而简单（替换为您想要的任何内容）：

您可以更改文件ui-bootstrap-tpls-0.11.0.js中的“template/popover/popover.html”
写：“绑定html不安全”而不是“ng绑定”

它将用html显示所有popover。
*它是不安全的html。仅在信任html时使用。
以可重用方式指定popover内容的另一种方法是创建新的数据属性，如
data popover content
，并按如下方式使用：

HTML:


这是通往#1的方向
这是#1的主体

JS:

当你有很多html要放在弹出窗口中时，这会很有用

这里有一个小提琴的例子：
这是对小提琴的一个轻微修改

以下内容确保没有HTML内容的简单弹出窗口不受影响

JavaScript:

$(function(){
    $('[data-toggle=popover]:not([data-popover-content])').popover();
    $('[data-toggle=popover][data-popover-content]').popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

这是一个老问题，但这是另一种方法，使用jQuery重用popover并继续使用原始引导数据属性使其更具语义：

链接
摆弄完整的例子：
您只需将
数据html=“true”
放在链接弹出框中即可。将正常工作。
您可以使用popover事件，并通过属性“数据宽度”控制宽度


$（'[data toggle=“popover huongdan”]'）。popover（{html:true}）；
$（'[data toggle=“popover huongdan”]'）。打开（“show.bs.popover”，函数（）{
var width=$（this.attr（“数据宽度”）==未定义？276:parseInt（$（this.attr（“数据宽度”））；
$（“div[id^=popover]”）css（“最大宽度”，宽度）；
});
将其添加到popper.js文件的底部：

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

Popper.Defaults.modifiers.computeStyle.gpuAcceleration=！（window.devicePixelRatio<1.5&&/Win/.test（navigator.platform））；

来源：
在最新版本的bootstrap 4.6上，您可能还需要使用
sanitize:false
来添加复杂的html

$('.popover-with-html').popover({ html : true, sanitize : false })

最简单的方法是使用不同的引号包装html代码。很好的想法。很好，实际的技巧是将双引号改为单引号！这种模块化方法非常优雅。你可以有许多弹出窗口和一个通用javascript函数。这太棒了，@Jack，谢谢。我喜欢不必将HTML放入属性中。太混乱了。这里的工作棒极了，喜欢它的简单性和易用性。你这个真正的MVPIt似乎不适用于bootstrap 3.4.1，你能帮忙吗@杰克，我在这里回答了同样的问题：有没有办法在gwtbootstrap3中使用它，它在这种形式下不起作用。我在这里问了这个问题，但到目前为止还没有答案。我不知道为什么上面的答案被标记为正确。也许人们故意选择最复杂的选项来保住他们的工作。我在我的页面底部有一个popover，除了。。。它让我一路回到了页面的顶部。我把它设置在引导缩略图的foreach循环中。有什么想法吗？删除锚定标记元素上的HREF=“#”以防止滚动到页面顶部@彼得·克鲁：谢谢你这么说。我更新了我的答案，使用最新版本的bootstrap，并修复了标签中的href=“#”并使其行为类似于按钮。（这也记录在引导站点）。在我的答案末尾添加了该链接。我发现iOS设备存在问题。popover可与触摸屏配合使用。你找到一般的工作了吗？事实上，我认为这种情况也发生在引导popover代码上。有什么想法吗？
<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
    <h2>Some title</h2>
    Some text
</a>

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

$(function(){
    $('[data-toggle=popover]:not([data-popover-content])').popover();
    $('[data-toggle=popover][data-popover-content]').popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
   Show it!
</a>

<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

$('[rel="popover"]').popover({
    container: 'body',
    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
});

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

$('.popover-with-html').popover({ html : true, sanitize : false })