Bootstrap. Как скрывать popover при клике на любом месте?


В коробке bootstrap есть отличный компонент — popover. Но при работе с ним возникает неприятность — он не закрывается при клике на любом месте страницы. О том, как это исправить я расскажу в этой статье.

Скажу честно — этот вариант не претендует на изысканность или красоту — но он рабочий, выполняет свою функцию, при этом написан буквально на коленке.

Итак, инициируете плагин вот таким способом:

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

После этого добавляем отклик на клик в любом месте страницы:

$(document).click(function(e) {
    if (!$(e.target).is('[data-toggle="popover"], .popover-title, .popover-content')) {
        $('[data-toggle="popover"]').popover('hide');
    }
});

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

Обратите внимание, на первый параметр в методе is второго примера. Он обязательно должен соответствовать селектору, по которому мы инициировали плагин (селектору из первого примера).

, , ,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *