使用自定义html模板制作引导程序弹出窗口 [英] Make bootstrap popover work with custom html template

问题描述

我使用的是输入组文本框，我需要启动Bootstrap 3弹出窗口，popover模板应该由我设计并定义。
所以我现在使用的html是：

I am using an input group textbox and I need the Bootstrap 3 popover to work and the popover template should be defined &n designed by me. So the html I have currently with me is :

<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的跨度时，弹出窗口显示为以下HTML：

I want a popover to open when the input group icon is click. In this case when the span with class glyphicon-time is clicked a popover is or displayed with the following 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书写：

JS written:

$(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。

Can anyone please help me correcting what mistake I am doing and what needs to be done to display a popvhover.

推荐答案

您缺少popover的内容，您需要这样的内容

you are missing the content of the popover, you'll need something like this

$(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
    });
});

工作演示

这篇关于使用自定义html模板制作引导程序弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！