使引导弹出框与自定义 html 模板一起使用

Posted 2023-03-06

【中文标题】使引导弹出框与自定义 html 模板一起使用

【英文标题】：Make bootstrap popover work with custom html template

【发布时间】：2014-08-26 03:29:04

【问题描述】：

我正在使用输入组文本框，我需要 Bootstrap 3 弹出框才能工作，并且弹出框模板应该由我定义和设计。 所以我目前拥有的 html 是：

<div class="row">
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control jq-timePicker" value="09:30">
                <span class="input-group-addon" rel="popover">
                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
</div>

我希望在单击输入组图标时打开一个弹出框。在这种情况下，当单击具有 glyphicon-time 类的 span 时，会显示或显示带有以下 HTML 的弹出框：

<div class="timePickerWrapper popover">
            <div class="arrow"></div>
            <div class="popover-content">
                <div class="timePickerCanvas"></div>
                <div class="timePickerClock timePickerHours"></div>
                <div class="timePickerClock timePickerMinutes"></div>
            </div>
        </div>

JS 写的：

$(document).ready(function () 
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
        '<div class="arrow"></div>',
        '<div class="popover-content">',
        '<div class="timePickerCanvas"></div>',
        '<div class="timePickerClock timePickerHours"></div>',
        '<div class="timePickerClock timePickerMinutes"></div>',
        '</div>',
        '</div>'].join('');


    $('body').popover(
        selector: '[rel=popover]',
        trigger: 'click',
        template: popoverTemplate,
        placement: "bottom",
        html: true
    );
);

在这里查看小提琴：http://www.bootply.com/4fMzxGRpik

谁能帮我纠正我在做什么错误以及需要做什么才能显示popvhover。

【参考方案1】：

你缺少弹出框的内容，你需要这样的东西

$(document).ready(function () 
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
        '<div class="arrow"></div>',
        '<div class="popover-content">',
        '</div>',
        '</div>'].join('');

    var content = ['<div class="timePickerCanvas">asfaf asfsadf</div>',
        '<div class="timePickerClock timePickerHours">asdf asdfasf</div>',
        '<div class="timePickerClock timePickerMinutes"> asfa </div>', ].join('');


    $('body').popover(
        selector: '[rel=popover]',
        trigger: 'click',
        content: content,
        template: popoverTemplate,
        placement: "bottom",
        html: true
    );
);

Working demo

【讨论】：

文档对此并不明显。谢谢！

【参考方案2】：

我希望所有的 HTML 都包含在模板中。它是这样的：

javascript 中的一些东西

$(".btn").popover(
   template: $("#selector").html(),
   placement: "auto"
);

在 HTML 中

<div id="selector">
    Anything you want in your popovers, either dynamic or static
<div>

【参考方案3】：

@code-jaff 这是一个很好的答案，但我注意到 Working Demo 的弹出框看起来不像是从按钮中出来的。如果其他人发生这种情况，请尝试将 container: 'body' 添加到弹出选项中。像这样：

$('body').popover(
    selector: '[rel=popover]',
    trigger: 'click',
    content: content,
    template: popoverTemplate,
    placement: "bottom",
    html: true,
    container: 'body'
);

【参考方案4】：

我想尝试的是最小配置，不想将代码拆分为 JS 和 HTML，这是我的解决方案。

这是我发现的，

引导程序版本 4.5.2 添加popper js

将您的代码放入 data-content 属性中。

这是我的 HTML 代码

<a tabindex="0" html="true" class="btn btn-sm" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And heres some <b>amazing content</b>. Its very engaging. Right?">Dismissible popover</a>

这是我的 JS 代码

 $('[data-toggle="popover"]').popover(
    html : true
 );