弹出框在外部单击时手动关闭：在 Safari 中不起作用

Posted 2023-05-08

【中文标题】弹出框在外部单击时手动关闭：在 Safari 中不起作用

【英文标题】：Popover Manual Close on Outside Click: Not Working in Safari

【发布时间】：2019-03-03 15:34:32

【问题描述】：

JSFiddle：http://jsfiddle.net/L4tjpsbn/

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

它可以在除 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');
);

【参考方案1】：

您必须更改一些标记，如文档所述 here，您可以搜索“下次单击时关闭所需的特定标记”，然后您会找到信息，基本上您必须更改 @987654323 @ 代表<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>