当在外部而不是弹出窗口上单击时，使引导程序弹出窗口关闭

Make a bootstrap Popover close when clicked outside not on the popover

本文关键字：窗口 引导程序 单击 外部      更新时间：2023-12-19

在内部单击popover时，是否有任何方法可以阻止它关闭？当我添加container选项时，就会发生这种情况。

$('#share_form').popover({
    'container': '#share_form',
    'html': true,
    'content': function() { return $('#popover_content').html(); },
    'title': 'My Title',
    'placement': 'bottom',
    'viewport': 'body',
});
$(document).on('click', '#div_button', function(event)
{
    event.preventDefault();
    alert("Whent his is clicked, the popover closes :(");
});
<div id="popover_content" style="display:none;">
    <div id="div_button">Click Me</div>
</div>

编辑：这就是我最终得到的，效果很好；

$('#popover_button').popover({ 
    'trigger': 'manual',
    'container': '#element', /* element that moves on resize like popover_button */
    'html': true,
    'content': function() { return $('#popover_content').html(); },
    'placement': 'bottom',
    'viewport': 'body'
});
$("#popover_button").click(function(e){$('#popover_button').popover('toggle');});
$(document).click(function(e){
    //popover_element is just what was inside #popover_button
    if(e.target.id !== "popover_element" && !$(event.target).hasClass('popover-content')) 
        $("#popover_button").popover('hide');
});

你可以试试这个。这来自引导程序的文档。

<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>

您可能需要对此进行一些调整：http://jsfiddle.net/6zcyfrqp/1/

HTML

<button type="button" class="btn btn-default">Popover on right</button>
<div id="content" class="hidden">this is my awesome content
    <br/>includes a
    <button type="button" class="btn btn-default">save</button> button
</div>

JS

 $(function () {
    var options = {
        content: function () {
            return $("#content").html();
        },
        placement: "right",
        container: "body",
        toggle: "popover",
        title: 'My Title',
        html: true
    };
    $('.btn').popover(options);
});
相关文章：