按钮上的 Bootstrap 3 弹出框未正确关闭

Question

我遇到了使用<button> 元素正确关闭引导程序 3 弹出框的问题。

需要发生的是，当点击新按钮或单击现有按钮的焦点时，弹出框应该关闭。

这在一定程度上有效，我的意思是按钮确实隐藏但没有正确关闭。因此，如果有按钮x y z 并且我通过单击x 启动实例，则弹出正确显示。

现在点击下一次...说z。 x 将隐藏，z 将显示。

到目前为止还不错吧？

当我再次单击x 时会发生什么，它会完全关闭按钮（不显示），随后单击将显示x。

简而言之，当单击焦点隐藏弹出框时，它并没有完全关闭它。导致双击按钮再次显示它，而不是单击。

参考见下面的html和js：

HTML

<button type="button" class="btn btn-default videos-popover-button" href="#" data-container="body" data-toggle="popover" data-trigger="click" data-placement="bottom" data-html="true" data-content='
<p>{{{description}}}</p>
<form class="video-favorite-mobile">
    <input type="checkbox" checked="" name="favorite" value="favorite">
</form>
<form class="video-queue-mobile">
    <input type="checkbox" checked="" name="queue" value="queue">
</form>
<a href="{{link}}" title="{{name}}" data-video-width="{{width}}" data-video-height="{{height}}" data-description="{{description}}"{{#allow_downloads}}{{#download}} data-download-{{quality}}="{{link}}"{{/download}}{{/allow_downloads}}>watch now</a>'
data-trigger="focus" href="#" style="cursor: pointer;">
<img alt="{{name}}" src="{{thumbnail_large}}">
<div class="video-gallery-single">
    <p>{{{description}}}</p>
</div>
<div class="video-gallery-bottom">
    <form class="video-favorite">
        <input type="checkbox" checked="" name="favorite" value="favorite"
        data-toggle='tooltip' data-placement='bottom' 
        data-original-title='add to favorites'>
    </form>
    <form class="video-queue">
        <input type="checkbox" checked="" name="queue" value="queue" 
        data-toggle='tooltip' data-placement='bottom' 
        data-original-title='add to queue'>
    </form>
    <a href="{{link}}" title="{{name}}" data-video-width="{{width}}" data-video-height="{{height}}" data-description="{{description}}"{{#allow_downloads}}{{#download}} data-download-{{quality}}="{{link}}"{{/download}}{{/allow_downloads}}>watch now</a>
</div>
</button>

js

jQuery(document).ready(function($) {
    $('body').on('click', function (e) {
        $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
      });
    });

});

Answer 1

你需要data-trigger="click"吗？

如果您将data-trigger 设置为focus，您应该能够在点击离开弹出框时关闭弹出框，而无需任何额外的javascript（除非您正在寻找不同的行为）。

Bootstrap documentation: Dismissible popover

编辑：

您的评论：

“已尝试使用 data-trigger="focus" 它破坏了移动浏览器（尤其是 iOS）上的功能。”

您正在为弹出框触发器使用button 元素。以下是文档状态：

dismiss-on-next-click 所需的特定标记 对于正确的跨浏览器和跨平台行为，您必须使用<a> 标签，而不是<button> 标签，并且您还必须包含role="button" 和tabindex 属性。