Скрытие всплывающего окна Bootstrap при нажатии снаружи всплывающего окна

Я сделал http://jsfiddle.net/BcczZ/2/, который, надеюсь, ответит на ваш вопрос.

Пример HTML

<div class="well>
    <a class="btn" data-toggle="popover" data-content="content.">Popover</a>
    <a class="btn btn-danger bad">Bad button</a>
</div>

JS

var $popover = $('[data-toggle=popover]').popover();

//first event handler for bad button
$('.bad').click(function () {
    alert("clicked");
});


$(document).on("click", function (e) {
    var $target = $(e.target),
    var isPopover = $target.is('[data-toggle=popover]'),
        inPopover = $target.closest('.popover').length > 0

    //Does nothing, only prints on console and wastes memory. BAD CODE, REMOVE IT
    $('.bad').click(function () { 
        console.log('clicked');
        return false;
    });

    //hide only if clicked on button or inside popover
    if (!isPopover && !inPopover) $popover.popover('hide');
});

Как я уже упоминал в своем комментарии, обработчики событий не перезаписываются, они просто складываются. Поскольку на кнопке .bad уже есть обработчик событий, он будет запущен вместе с любым другим обработчиком событий.

Откройте консоль в jsfiddle, нажмите 5 раз где-нибудь на странице (не кнопку всплывающего окна), а затем нажмите bad button, вы должны увидеть, что щелкнули напечатано столько же раз, сколько вы нажали

Надеюсь, поможет

P.S. Если подумать, вы уже видели, как это происходит, особенно в jQuery. Подумайте обо всех $(document).ready(...), которые существуют на странице с использованием нескольких плагинов jquery. Эта строка просто регистрирует обработчик события ready документа.

Я просто сделал решение, основанное на событиях.

var $toggle = $('.your-popover-button');
$toggle.popover();

var hidePopover = function() {
    $toggle.popover('hide');
};

$toggle.on('shown', function () {
    var $popover = $toggle.next();
    $popover.on('mousedown', function(e) {
        e.stopPropagation();
    });
    $toggle.on('mousedown', function(e) {
        e.stopPropagation();
    });
    $(document).on('mousedown',hidePopover);
});

$toggle.on('hidden', function () {
    $(document).off('mousedown', hidePopover);
});

короткий ответ вставьте это в загрузочный min.js

когда всплывающее окно onblur будет скрывать всплывающее окно
когда всплывающее окно более одного, старое всплывающее окно будет скрыто

$count=0;$(document).click(function(evt){if($count==0){$count++;}else{$('[data-toggle="popover"]').popover('hide');$count=0;}});$('[data-toggle="popover"]').popover();$('[data-toggle="popover"]').on('click', function(e){$('[data-toggle="popover"]').not(this).popover('hide');$count=0;});

Ни одно из вышеперечисленных решений не сработало для меня на 100%, потому что мне пришлось дважды щелкнуть другое или одно и то же всплывающее окно, чтобы открыть его снова. Я написал решение с нуля, чтобы оно было простым и эффективным.

   $('[data-toggle="popover"]').popover({
        html:true,
        trigger: "manual",
        animation: false
    });

    $(document).on('click','body',function(e){
        $('[data-toggle="popover"]').each(function () {
            $(this).popover('hide');
        });

        if (e.target.hasAttribute('data-toggle') && e.target.getAttribute('data-toggle') === 'popover') {
            e.preventDefault();
            $(e.target).popover('show');
        }
        else if (e.target.parentElement.hasAttribute('data-toggle') && e.target.parentElement.getAttribute('data-toggle') === 'popover') {
            e.preventDefault();
            $(e.target.parentElement).popover('show');
        }
    });

Мое решение работает на 100% для Bootstrap v3

$('html').on('click', function(e) {
    if(typeof $(e.target).data('original-title') !== 'undefined'){
         $('[data-original-title]').not(e.target).popover('hide');
    }

    if($(e.target).parents().is('[data-original-title]')){
         $('[data-original-title]').not($(e.target).closest('[data-original-title]')).popover('hide');
    }

    if (typeof $(e.target).data('original-title') == 'undefined' &&
!$(e.target).parents().is('.popover.in') && !$(e.target).parents().is('[data-original-title]')) {
        $('[data-original-title]').popover('hide');
    }
});