Popover 手动关闭外部点击：在 Safari 中不起作用

Question

我有一个 Bootstrap 使用手动模式实现的弹出窗口，以便允许在外部的任何地方关闭 （外部单击关闭）。

除了 Safari，它在任何地方都适用。在 Safari 中，在 Mac 笔记本电脑上，弹出窗口打开后，我无法通过外部点击将其关闭。我只能通过再次单击源按钮来关闭它。

有什么想法吗？

// Initialize Button popover, whose contents comes from a DIV
$('#delegatorInfoButton').popover({
    trigger: 'manual',
    html: true,
    title: '<span style="font-weight: bold;">TITLE</span>',
    content: function() {
        return $('#delegatorInfoButtonPanel').html();
    }
});
// Manual handling of Button popover: dismiss on (1) Outside click as well as (2) next Button click
$('#delegatorInfoButton').click(function() {
    $(this).popover('toggle');
}).blur(function() {
    $(this).popover('hide');
});

Answer 1

您必须按照文档所述 here 稍微更改您的标记，您可以搜索 'Specific markup required for dismiss-on-next-click' 并在那里找到信息，基本上您必须更改 <button> <a> 并且您还必须包括 role="button" 和 tabindex 属性。

这是我在 Safari 上测试的示例： http://jsfiddle.net/checosele/e3xtvq2y/

// Initialize Delegator Info Button popover (may not be applicable)
$('#delegatorInfoButton').popover({
    trigger: 'manual',
    html: true,
    title: '<span style="font-weight: bold;">TITLE</span>',
    content: function() {
        return $('#delegatorInfoButtonPanel').html();
    }
});
// Manual handling of Delegator Info Button popover: dismiss on focus events as well as next source-icon click
$('#delegatorInfoButton').click(function() {
    $(this).popover('toggle');
}).blur(function() {
    $(this).popover('hide');
});

这是 html:

<a role="button" id="delegatorInfoButton" type="button" class="btn btn-primary elo" data-toggle="popover" data-placement="right" tabindex="0">
  Open Popover
</a>

<!-- Delegator Info Button Content Panel: Initially empty, will be populated after Ajax fetch upon selection -->
<div id="delegatorInfoButtonPanel" style="display: none">
  CONTENT HERE
</div>

Popover 手动关闭外部点击：在 Safari 中不起作用

Popover Manual Close on Outside Click: Not Working in Safari

jquery

twitter-bootstrap

twitter-bootstrap-3

popover