В коробке 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
второго примера. Он обязательно должен соответствовать селектору, по которому мы инициировали плагин (селектору из первого примера).