单击外部而不是弹出窗口时,使Bootstrap Popover关闭

时间:2015-02-18 00:42:26

标签: javascript jquery twitter-bootstrap

有什么方法可以阻止弹出窗口在内部点击时关闭?当我添加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');
});

2 个答案:

答案 0 :(得分:1)

你可以试试这个。这是来自bootstrap的文档。

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

答案 1 :(得分:0)

您可能需要稍微调整一下: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);
});