如何通过单击外部来关闭 Twitter Bootstrap 弹出窗口?

问题描述：

我们可以像模态一样让弹出窗口被关闭吗，即.当用户点击它们之外的某个地方时让它们关闭?

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

不幸的是，我不能只使用真正的 modal 而不是 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. :(

答

更新: 稍微更强大的解决方案:http://jsfiddle.net/mattdlockyer/C5GBU/72/

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 生成的 Popovers 使用 '[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.

更新: Bootstrap 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
        }

    });
});

更新:利用之前改进的条件，实现了这个解决方案.修复双击和ghost popover的问题:

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 弹出窗口?

相关推荐