如何通过单击外部消除Twitter Bootstrap弹出窗口? [英] How to dismiss a Twitter Bootstrap popover by clicking outside?

问题描述

我们可以使弹出窗口与模式一样被消除吗?当用户单击它们外部的某个位置时使它们关闭?

Can we get popovers to be dismissable in the same way as modals, ie. make them close when user clicks somewhere outside of them?

不幸的是，我不能只使用真实的模式而不是popover，因为modal意味着position:fixed，这将不再是popover. :(

Unfortunately I can't just use real modal instead of popover, because modal means position:fixed and that would be no popover anymore. :(

推荐答案

更新:更为健壮的解决方案:

Update: A slightly more robust solution: http://jsfiddle.net/mattdlockyer/C5GBU/72/

对于仅包含文本的按钮:

For buttons containing text only:

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

对于包含图标的按钮，请使用(此代码在Bootstrap 3.3.6中存在错误，请参见此答案中的以下修复程序)

For buttons containing icons use (this code has a bug in Bootstrap 3.3.6, see the fix below in this answer)

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

对于JS生成的弹出窗口，请使用'[data-original-title]'代替'[data-toggle="popover"]'

注意事项:以上解决方案允许一次打开多个弹出窗口.

Caveat: The solution above allows multiple popovers to be open at once.

请一次弹出一个弹出窗口:

更新:Bootstrap 3.0.x，请参见代码或拨弄 http://jsfiddle.net/mattdlockyer/C5GBU/2/

Update: Bootstrap 3.0.x, see code or fiddle http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('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');
        }
    });
});

这将处理已打开但未单击的弹出窗口或未单击其链接的弹出窗口.

This handles closing of popovers already open and not clicked on or their links have not been clicked.

更新:引导程序3.3.6，参见小提琴

Update: Bootstrap 3.3.6, see fiddle

修复了关闭后需要2次点击才能重新打开的问题

Fixes issue where after closing, takes 2 clicks to re-open

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').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').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

更新:使用之前的改进条件，此解决方案得以实现.解决了双击和幻影弹出窗口的问题:

Update: Using the conditional of the previous improvement, this solution was achieved. Fix the problem of double click and ghost popover:

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').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) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});

这篇关于如何通过单击外部消除Twitter Bootstrap弹出窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！