首页 文章

使用自定义html模板制作bootstrap popover

提问于
浏览
19

我正在使用输入组文本框,我需要Bootstrap 3 popover才能工作,弹出模板应该由我设计和设计 . 所以我目前和我在一起的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显示或使用以下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需要做些什么 .

2 回答

  • 18

    你错过了popover的内容,你需要这样的东西

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

  • 1

    @ code-jaff这是一个很好的答案,但我注意到工作演示的弹出窗口看起来不像是从按钮出来 . 如果发生在其他任何人身上,请尝试将容器:'body'添加到popover选项中 . 像这样:

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

相关问题