引导弹出未出现
引导弹出未出现
提问于 2015-10-22 17:59:22
我试图通过单击某个链接在一个页面上显示多个弹出框。我将在一个div上给你们展示一个例子。如下所示：
$(".tutorial").on('click', function(){
$('[data-toggle="popover"]').popover();
});
<li>
<a href="#" class="tutorial">
<span class="glyphicon glyphicon-book" aria-hidden="true"></span>
Tutorial Mode
</a>
</li>
<div data-container="body" data-toggle="popover" data-placement="right"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
style="height:100%; " class="col-xs-3 label-positive"
data-original-title="" title="">
<h2 style="height:100%; font-weight:bold; padding: 15px 1px 15px 1px; border-radius:5px;" class="text-center"> +3$</h2>
</div>当我点击div弹出式显示没有问题，但当我点击链接什么都没有发生。控制台没有任何错误，只是什么都没发生
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-10-22 18:09:13
.popover()只是创建popover()引导元素，因此必须在某个位置，然后触发它以显示您这样做：
$(".tutorial").on('click', function(){
$('[data-toggle="popover"]').popover('show');
});实际上，我可能弄错了，我认为您调用.popover()是为了使任何元素成为弹出器，但是如果您使用的是数据属性，那么bootstrap.js应该已经处理了这行$('[data-toggle="popover"]').popover();。
.popover('show')会显示，而.popover('destroy')会去掉弹出器
Stack Overflow用户
发布于 2015-10-22 18:40:21
引导弹出需要通过jQuery手动初始化。将其添加到.js文件中：
$('[data-toggle="popover"]').popover();如果一个页面上有多个弹出框，也可以使用此脚本一次只能显示一个。
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33293698
复制相关文章
相似问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
