javascript - 引导弹出窗口在 Chrome 中不起作用

Question

http://www.rightoption.co/

您会在页面的 RHS 一侧找到“我们的客户”，单击缩略图会打开弹出窗口（Firefox），但它在 Google chrome 中不起作用，请帮我解决这个问题

编辑：网站不再托管

Answer 1

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

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

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

或者

在您的文档 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');
    });