Загрузочный постер, скрыть на клик снаружи?

используя bootstrap popover, и теперь я пытаюсь заставить этот код нажать вне popover, чтобы закрыть 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('hide');
        }
    });
});

Но когда я использую эту часть, я могу закрыть popover, но я не могу нажать на другие кнопки, кто-нибудь понял, как я могу это сделать?

Все кнопки:

<a href="#" class="btn btn-xs btn-primary" data-toggle="popover">This opens popover</a>
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work 
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work

Ответы

Ответ 1

Я нашел это: http://bootply.com/99372

$('body').on('click', function (e) {
    $('[data-toggle=popover]').each(function () {
        // hide any open popovers when the anywhere else in the body is clicked
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Это почти тот же код, что и вы...

Ответ 2

На самом деле вам даже не нужна JS, так как в Bootstrap уже есть настройка.

Смотрите: http://getbootstrap.com/javascript/#dismiss-on-next-click

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

Ex.:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here some amazing content. It very engaging. Right?">Dismissible popover</a>

Ответ 3

Даже у меня была эта проблема.. и я могу избавиться от нее.

просто добавьте эту строку в свой код..:

 $(this).css('display', 'none');

Ответ 4


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

Цель этого кода - имитировать щелчок по кнопке, которая активирует popover.

Итак, есть код:

$('html').on('click', function(e) {
    $('[data-toggle="popover"]').each(function() { //Loop for everything containing a data-toggle="popover"
        if ($(this).attr('aria-describedby') != null ) { //Check if the popover is active / contain an aria-describedby with a value
            var id = $(this).attr('aria-describedby'); //Put the value in a variable
            if (!$(e.target).closest(".popover-content").length && $(e.target).attr("aria-describedby") != id && !$(e.target).closest('[aria-describedby="'+id+'"').length) { //Look if the click is a child of the popover box or if it the button itself or a child of the button
                $('[aria-describedby="'+id+'"]').trigger( "click" ); //trigger a click as if you clicked the button
            }
        }
    });
});

Ответ 5

Попробуй это. Он закроет всплывающее окно при щелчке на внешней стороне всплывающего окна.

$('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').data('bs.popover') || {}).inState || {}).click = false;
}
});

Другое решение,

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here some amazing content. It very engaging. Right?">Dismissible popover</a>

add tabindex = "0" и data-trigger = "focus"

Ответ 6

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

data-trigger="focus"

Ссылка отсюда: Bootstrap Popover

Ответ 7

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

 $('body').on('mouseleave', '.popover', function () {
        $(this).hide();
    });

Ответ 8

Просто скрыть поповер не получится. Вам нужно будет дважды щелкнуть, чтобы снова отобразить popover. https://github.com/twbs/bootstrap/issues/16732

Для корректной работы Bootstrap 3.3.6. Попробуй это:

$('body').on('click', function (e) {
        $('[data-toggle=popover]').each(function () {
            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;
            }
        });
    });

Bootstrap 4 использует _activeTrigger вместо inState:

$(e.target).data("bs.popover")._activeTrigger.click = false

Ответ 10

**Try this**,below code is work for me,
Put below code in js file

$(function () {
    $('[data-toggle="popover"]').popover();
});
$('html').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
           if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

and HTML tag should be like this

<a data-toggle="popover"   data-placement="bottom" data-content-id="notifications-content">