Question

我打开一个引导模式窗口，通过Ajax加载一堆＆＃34; .map-pin＆＃34;图片。单击图像应打开弹出窗口。我有这么多工作：

$('body').popover({
    selector: '.map-pin',
    html: true,
    content: function() {
        return $(this).next('.popover_content').html();
    }
});

但是，现在我只需要一次打开popover。而且，如果点击身体（而不是弹出窗口）关闭所有打开的弹出窗口，那将是很棒的。这必须在Bootstrap 3.1.1中有效。任何帮助将不胜感激。

Answer 1

当我们看不到整个设置，标记等等时有点困难 - 但是我们还是去了:)首先，为什么要使用选择器选项？似乎有点倒退。我认为你应该为每个.map-pin初始化popovers。在通过AJAX注入HTML后运行此命令：

$('.map-pin').popover({
    trigger: 'click',
    html: true,
    content: function() {
        return $(this).next('.popover_content').html();
    }
});

然后，为了避免同时出现多个弹出窗口：

$('.map-pin').on('show.bs.popover', function() {
    $('.map-pin').not(this).popover('hide');
});

最后，隐藏任何可见的弹出窗口，如果你点击身体，而不是.map-pin或弹出窗口本身：

$('body').on('click', function(e) {
    if (e.target.className!='map-pin' && 
        e.target.className!='popover' &&
        e.target.className!='popover-content') {
       $('.map-pin').popover('hide');
    }
});

参见演示 - ＆gt;的 http://jsfiddle.net/3W6AY/

使用Bootstrap 3.1.1和选择器选项一次只有1个popover？

1 个答案: