Можем ли мы заставить всплывающие окна отклоняться так же, как модалы, т.е. закрыть их, когда пользователь щелкает где-то за их пределами?

К сожалению, я не могу просто использовать настоящий модальный вместо popover, потому что модальный означает position: fixed, и это больше не будет popover. :(

Обновление: чуть более надежное решение: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Для кнопок, содержащих только текст:

$('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, см. Исправление ниже в этом ответе)

$('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 Generated Popovers Использование '[data-original-title]'вместо'[data-toggle="popover"]'

Предостережение . Решение, приведенное выше, позволяет открывать сразу несколько всплывающих окон.

Один поповер за раз, пожалуйста:

Обновление: Bootstrap 3.0.x, см. Код или скрипку 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');
        }
    });
});

Это обрабатывает закрытие всплывающих окон, которые уже открыты и не нажаты, или их ссылки не были нажаты.

Обновление: Bootstrap 3.3.6, см. Скрипку

Исправлена ​​ошибка, из-за которой после закрытия требуется 2 клика для повторного открытия.

$(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
        }

    });
});

Обновление: используя условное условие предыдущего улучшения, это решение было достигнуто. Исправьте проблему двойного щелчка и призрачного всплывающего окна:

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

$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

Это закрывает все всплывающие окна, если вы нажимаете в любом месте, кроме всплывающих окон

ОБНОВЛЕНИЕ для Bootstrap 4.1

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

Самая простая, самая отказоустойчивая версия , работает с любой версией начальной загрузки.

Демо-версия: http://jsfiddle.net/guya/24mmM/

Демонстрация 2: Не отклонять при нажатии внутри всплывающего контента http://jsfiddle.net/guya/fjZja/

Демонстрация 3: Несколько поповеров: http://jsfiddle.net/guya/6YCjW/

Простое обращение к этой строке приведет к удалению всех всплывающих окон:

$('[data-original-title]').popover('hide');

Отключить все всплывающие окна при нажатии снаружи с этим кодом:

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

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

Он также будет работать с всплывающими окнами, инициированными с помощью Javascript, в отличие от некоторых других примеров, которые не будут работать. (см. демо)

Если вы не хотите отклоняться при нажатии внутри содержимого поповера, используйте этот код (см. Ссылку на 2-ую демонстрацию):

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

В bootstrap 2.3.2 вы можете установить триггер на «фокус», и он просто работает:

$('#el').popover({trigger:'focus'});

Это в основном не очень сложно, но есть некоторые проверки, чтобы избежать глюков.

Демо (jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});

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

Так что я немного изменил это:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})

Я сделал jsfiddle, чтобы показать вам, как это сделать:

http://jsfiddle.net/3yHTH/

Идея состоит в том, чтобы показывать всплывающее окно при нажатии кнопки и скрывать всплывающее окно при нажатии вне кнопки.

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

просто добавьте этот атрибут с элементом

data-trigger="focus"

Это было задано раньше здесь . Тот же самый ответ, который я дал тогда, все еще применяется:

У меня была похожая потребность, и я нашел это отличное небольшое расширение Twitter Bootstrap Popover от Ли Кармайкла, названное BootstrapX - clickover . У него также есть несколько примеров использования здесь . В основном это изменит поповер на интерактивный компонент, который закроется, когда вы щелкнете в другом месте на странице или нажмете кнопку закрытия внутри всплывающего окна. Это также позволит одновременно открывать несколько всплывающих окон и множество других приятных функций.

Уже поздно на вечеринку ... но я решил поделиться этим. Я люблю поповер, но у него так мало встроенной функциональности. Я написал расширение начальной загрузки .bubble (), это все, что я хотел бы, чтобы popover был. Четыре способа уволить. Нажмите снаружи, переключитесь на ссылку, нажмите X и нажмите escape.

Он позиционируется автоматически, поэтому он никогда не уходит со страницы.

https://github.com/Itumac/bootstrap-bubble

Это не бесплатная самореклама ... Я так много раз в своей жизни брал чужой код, что хотел предложить свои собственные усилия. Повернись и посмотри, сработает ли это для тебя.

Согласно http://getbootstrap.com/javascript/#popovers ,

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

Используйте триггер фокусировки, чтобы отклонить всплывающие окна при следующем щелчке, который делает пользователь.

$('.popover-dismiss').popover({
    trigger: 'focus'
})

Изменено принятое решение. Что я испытал, так это то, что после того, как некоторые поповеры были скрыты, их нужно было дважды щелкнуть, чтобы снова появиться. Вот что я сделал для того, чтобы popover («hide») не вызывался на уже скрытых popovers.

$('body').on('click', function (e) {
    $('[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) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});

Просто добавьте этот атрибут в элемент HTML, чтобы закрыть всплывающее окно в следующем щелчке.

data-trigger="focus"

ссылка с https://getbootstrap.com/docs/3.3/javascript/#popovers

Это решение отлично работает:

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

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

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

jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });

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

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

В своем html добавьте класс .popover-close к содержимому внутри поповера, который должен закрывать поповер.

Кажется, метод 'hide' не работает, если вы создаете всплывающее окно с делегированием селектора, вместо этого должен использоваться 'destroy'.

Я сделал это так:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

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

JSfiddle здесь

Мы обнаружили, что у нас возникла проблема с решением @mattdlockyer (спасибо за решение!). При использовании свойства селектора для конструктора popover, как это ...

$(document.body').popover({selector: '[data-toggle=popover]'});

... предлагаемое решение для BS3 не будет работать. Вместо этого он создает второй экземпляр popover, локальный для него $(this). Вот наше решение, чтобы предотвратить это:

$(document.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) {
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        }
    });
});

Как уже упоминалось, $(this).popover('hide');будет создан второй экземпляр из-за делегированного слушателя. Предоставленное решение скрывает только всплывающие окна, которые уже созданы.

Надеюсь, я смогу сэкономить вам время.

Bootstrap изначально поддерживает это :

JS Bin Demo

Специальная разметка, необходимая для отклонения при следующем нажатии

Для правильного кросс-браузер и поведение кросс-платформенной, вы должны использовать <a>тег, не<button> тегов, и вы также должны включать в себя role="button"и tabindexатрибуты.

это решение избавляет от надоедливого 2-го щелчка при показе поповера во второй раз

протестировано с Bootstrap v3.3.7

$('body').on('click', function (e) {
    $('.popover').each(function () {
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) {
            popover.inState.click = false;
            popover.hide();                
        }
    });
});

Я пробовал многие из предыдущих ответов, на самом деле у меня ничего не работает, но это решение сработало:

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

Они рекомендуют использовать тег привязки, а не кнопку, и позаботиться о атрибутах role = "button" + data-trigger = "focus" + tabindex = "0".

Пример:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>

Я придумал это: мой сценарий включал в себя больше всплывающих окон на той же странице, и скрытие их просто делало их невидимыми, и поэтому щелкать по элементам позади поповера было невозможно. Идея состоит в том, чтобы пометить конкретную ссылку popover как «активную», и тогда вы можете просто «переключить» активный popover. Это полностью закроет popover $ ('. Popover-link'). Popover ({html: true, container: 'body'})

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"

Я просто удаляю другие активные всплывающие окна до того, как будет показан новый поповер (начальная загрузка 3):

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});              

протестирован с 3.3.6 и второй клик в порядке

        $('[data-toggle="popover"]').popover()
            .click(function () {
            $(this).popover('toggle');
        });;

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

демо: http://jsfiddle.net/nessajtr/yxpM5/1/

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();

options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;

self.onClose = function () {
    $("#" + divId).html(options.loadingContent());
    $(selector).popover('hide')
    isVisible = clickedAway = false;
};
self.onCallback = function (result) {
    $("#" + divId).html(result);
};

$(selector).popover(options);

//events
$(selector).bind("click", function (e) {
    $(selector).filter(function (f) {
        return $(selector)[f] != e.target;
    }).popover('hide');

    $(selector).popover("show");
    callbackMethod(self.onCallback);

    isVisible = !(clickedAway = false);
});

$(document).bind("click", function (e) {
    if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
        self.onClose();
        isVisible = clickedAway = false;
    } else clickedAway = true;
});

}

это мое решение для этого.

Этот подход гарантирует, что вы можете закрыть всплывающее окно, нажав в любом месте на странице. Если вы нажмете на другую кликабельную сущность, она скрывает все другие всплывающие окна. Анимация: ложь требуется, иначе вы получите ошибку jquery .remove в вашей консоли.

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')

Хорошо, это моя первая попытка ответить на что-то о stackoverflow, так что здесь ничего не идет: P

Похоже, что не совсем ясно, что эта функция на самом деле работает из коробки на последней загрузке (ну, если вы готовы пойти на компромисс, где пользователь может щелкнуть. Я не уверен, нужно ли вам нажимать hover 'per se, но на iPad щелчок работает как переключатель.

Конечным результатом является то, что на рабочем столе вы можете зависать или нажимать (большинство пользователей будут зависать). На сенсорном устройстве прикосновение к элементу вызовет его подъем, а прикосновение к нему снова приведет к его снятию. Конечно, это небольшой компромисс с вашим первоначальным требованием, но, по крайней мере, ваш код стал чище :)

$ (". my-popover"). popover ({trigger: 'click hover'});

Взяв код Мэтта Локьера, я сделал простой сброс, чтобы dom не скрывался элементом hide.

Код Мэтта: http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

Скрипка: http://jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[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');
        }
    });
});

Попробуйте, это будет скрыто, нажав снаружи.

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

У меня были проблемы с решением mattdlockyer, потому что я динамически настраивал ссылки для всплывающих окон, используя такой код:

$('body').popover({
        selector : '[rel="popover"]'
});

Поэтому мне пришлось изменить это так. Это исправило много проблем для меня:

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

Помните, что destroy избавляет от элемента, поэтому часть селектора важна при инициализации всплывающих окон.