我正在使用输入组文本框,我需要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 回答
你错过了popover的内容,你需要这样的东西
Working demo
@ code-jaff这是一个很好的答案,但我注意到工作演示的弹出窗口看起来不像是从按钮出来 . 如果发生在其他任何人身上,请尝试将容器:'body'添加到popover选项中 . 像这样: