Question

http://www.rightoption.co/

您将在页面的RHS页面找到“我们的客户”，点击它打开的缩略图（Firefox），但它不适用于Google Chrome，请帮我解决这个问题

修改：网站不再托管

Answer 1

这是因为弹出框的默认触发器是焦点。在Firefox中，当您点击某些内容时，它似乎获得了关注，但在这种情况下，Chrome似乎并非如此。

您可以尝试以下两种方法之一：

尝试手动将标签上的触发器设置为“手动”。所以添加这个属性data-trigger =“manual”

OR

在您的文档onload中，而不是：

$('#element, #element1').popover('toggle').popover('hide');

请改用此行：

$('#element, #element1')
   .popover()
   .click(function(e) { 
       e.preventDefault(); 
       $(this).focus(); 
   });

Answer 2

接受的答案现在相当陈旧，但它在谷歌搜索中出现了，所以我想补充一点，从版本2.3.0开始，Bootstrap现在允许发送'悬停焦点'作为触发因此它将两者兼而有之。而且非常重要的是，它还允许“点击”触发器按照您的预期工作（特别是针对Chrome）。

Answer 3

这对我有用！

var el = $('[data-toggle="popover"]');
el
    .on('shown.bs.popover', function(){
        $(document).on('click.popover', function() {
            el.popover('hide');
            $(document).off('click.popover');
        });                            
    })
    .popover();

更新：上面有一个问题，即在显示弹出窗口时单击另一个弹出框元素会关闭打开的弹出框，但不会打开新的弹出框。以下将关闭打开的弹出窗口并单击打开新的弹出窗口。

var el = $('[data-toggle="popover"]');
el
    .on('click', function(e){
        var el = $(this);
        setTimeout(function(){
            el.popover('show');
        }, 200); // Must occur after document click event below.
    })
    .on('shown.bs.popover', function(){
        $(document).on('click.popover', function() {
            el.popover('hide'); // Hides all 
        });
    })
    .on('hide.bs.popover', function(){
        $(document).off('click.popover');
    });

Bootstrap popover无法在Chrome中运行

3 个答案: