我们如何从javascript调用类bootstrap和设计我们自己的内容字段的弹出窗口

How can we call a class of bootstrap from javascript and design our own content field of popover?

本文关键字：我们 自己的 字段 窗口 我们自己 javascript 调用 bootstrap      更新时间：2023-09-26
$(function () {
    $('[data-toggle="popover"]').popover({ 
           trigger: 'click',
           'placement': 'bottom', 
           html: true, content:" " 
    });
});

如何在弹出窗口的内容栏中调用CSS类bootstrap

下面是添加HTML内容的基本格式:

var title = 'Oh, hello there...';
var htmlcontent = '<p>Here is some custom <strong>HTML</strong> content.</p>';
$('[data-toggle="popover"]').popover({
    trigger: 'focus',
    title: title,
    content: htmlcontent,
    placement: 'bottom',
    html: true
});

您也可以自定义弹出窗口模板，但模板必须具有以下基本元素:

<div class="popover" role="tooltip"> <!--Outermost wrapper element with .popover class -->
  <div class="arrow"></div> <!--Creates the arrow -->
  <h3 class="popover-title"></h3> <!--Title is injected here (this is optional) -->
  <div class="popover-content"></div> <!--Content is injected here (not optional)-->
</div>

如果使用自定义模板，不要尝试直接在模板中添加标题或内容，它只会被选项中设置的内容和标题或标记中的data-content/title属性所覆盖。如果您不提供任何内容值，弹出窗口将失败。

演示展示了使用标准模板注入自定义html内容和使用自定义模板的示例。

演示

相关文章：