javascript - 在弹出窗口外部单击时隐藏 Bootstrap 弹出窗口

Question

我对引导弹出窗口进行了以下设置。加载页面时会出现弹出窗口，如果我单击弹出窗口，它就会消失。不过，我真正想要的是，如果我在弹出窗口之外单击，或者在下次单击时更好，它就会消失。关于如何实现这项工作有什么想法吗？

$('div').on('hide.bs.popover', function (e) {
        e.preventDefault();
    });

    $(document).ready(function() {
        $("div").popover("show");
    });



    $('body').on('click', '.popover', function () {
        $(this).hide();
    });

<div class="dropdown pull-right" data-toggle="popover" data-placement="left" data-content="Main menu" style="right: -2px; top: 3px;">

<a href="#" class="glyphicon glyphicon-th dropdown-toggle" data-toggle="dropdown" style="color: #317EAC; text-decoration: none !important; font-size: 22px;"></a>
</div>

Answer 1

根据文档:使用焦点触发器在用户下次单击时关闭弹出窗口。所以使用data-trigger="focus"

下次点击时关闭所需的特定标记为了正确的跨浏览器和跨平台行为，您必须使用标记，而不是标记，并且还必须包含 role="button"和 tabindex 属性。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>