Twitter Bootstrap popoverをページのどこか（他）からクリックして閉じるにはどうすればよいですか？
私は現在、Twitter Bootstrapでポップオーバーを使用しています。
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.preventDefault();
});
ご覧のとおり、それらは手動でトリガーされ、.popup-marker（背景画像のあるdiv）をクリックするとポップオーバーが切り替わります。これはうまく機能しますが、ページ上の他の場所をクリックするだけでポップオーバーを閉じることもできます（ただし、ポップオーバー自体はそうではありません！）。
次のようないくつかのことを試しましたが、結果は表示されませんでした。
$('body').click(function(e) {
$('.popup-marker').popover('hide');
});
どうすればページ上の他の場所をクリックしてもポップオーバーを閉じることができますが、ポップオーバー自体をクリックすることはできませんか？
常に1つのポップオーバーのみが表示されると仮定すると、フラグのセットを使用して、ポップオーバーが表示されている場合にマークを付け、それらを非表示にすることができます。
ドキュメントボディにイベントリスナーを設定すると、「popup-marker」でマークされた要素をクリックするとトリガーされます。そのため、イベントオブジェクトでstopPropagation()を呼び出す必要があります。そして、ポップオーバー自体をクリックするときに同じトリックを適用します。
以下は、これを行う実用的なJavaScriptコードです。 jQuery> = 1.7を使用します
jQuery(function() {
var isVisible = false;
var hideAllPopovers = function() {
$('.popup-marker').each(function() {
$(this).popover('hide');
});
};
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).on('click', function(e) {
// if any other popovers are visible, hide them
if(isVisible) {
hideAllPopovers();
}
$(this).popover('show');
// handle clicking on the popover itself
$('.popover').off('click').on('click', function(e) {
e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
});
isVisible = true;
e.stopPropagation();
});
$(document).on('click', function(e) {
hideAllPopovers();
isVisible = false;
});
});
http://jsfiddle.net/AFffL/539/
唯一の注意点は、同時に2つのポップオーバーを開くことができないことです。しかし、とにかく、それはユーザーにとって混乱するだろうと思う:-)
これはさらに簡単です：
$('html').click(function(e) {
$('.popup-marker').popover('hide');
});
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.stopPropagation();
});
同様のニーズがあり、これを見つけました Twitter Bootstrapリー・カーマイケルによるポップオーバー、BootstrapXと呼ばれる-クリックオーバー 。彼にはいくつかの使用例もあります here 。基本的には、ポップオーバーをインタラクティブなコンポーネントに変更し、ページ上の別の場所をクリックするか、ポップオーバー内の閉じるボタンをクリックすると閉じます。これにより、複数のポップオーバーを一度に開いたり、他の多くの素敵な機能を使用したりすることもできます。
使用例
<button rel="clickover" data-content="Show something here.
<button data-dismiss='clickover'
>Close Clickover</button>"
>Show clickover</button>
javascript：
// load click overs using 'rel' attribute
$('[rel="clickover"]').clickover();
受け入れられた解決策は私にいくつかの問題を与えました（開かれたポップオーバーの「.popup-marker」要素をクリックすると、ポップオーバーはその後動作しなくなりました）。私にとって完璧に機能するこの他のソリューションを思い付きましたが、それは非常に簡単です（Bootstrap 2.3.1を使用しています）：
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$('.popup-marker').not(this).popover('hide');
$(this).popover('toggle');
});
$(document).click(function(e) {
if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
$('.popup-marker').popover('hide');
}
});
更新：このコードはBootstrap 3でも機能します！
ここで「次のクリックで閉じる」を読んでください http://getbootstrap.com/javascript/#popovers
フォーカストリガーを使用して次のクリックでポップオーバーを閉じることができますが、<a>タグではなく、<button>タグを使用する必要があります。また、tabindex属性を含める必要があります...
例：
<a href="#" tabindex="0" class="btn btn-lg btn-danger"
data-toggle="popover" data-trigger="focus" title="Dismissible popover"
data-content="And here's some amazing content. It's very engaging. Right?">
Dismissible popover
</a>
allドキュメントイベントをキャプチャしてからアクティブなポップオーバーを見つけるか、.popover()の呼び出しを変更することに依存しているため、既存の回答はすべて非常に脆弱です。
はるかに優れたアプローチは、ドキュメントの本文でshow.bs.popoverイベントをリッスンし、それに応じて対応することです。以下は、ドキュメントがクリックされるか、ポップオーバーを閉じるコードです esc が押されている、のみポップオーバーが表示されたときにイベントリスナーをバインドする：
function closePopoversOnDocumentEvents() {
var visiblePopovers = [];
var $body = $("body");
function hideVisiblePopovers() {
$.each(visiblePopovers, function() {
$(this).popover("hide");
});
}
function onBodyClick(event) {
if (event.isDefaultPrevented())
return;
var $target = $(event.target);
if ($target.data("bs.popover"))
return;
if ($target.parents(".popover").length)
return;
hideVisiblePopovers();
}
function onBodyKeyup(event) {
if (event.isDefaultPrevented())
return;
if (event.keyCode != 27) // esc
return;
hideVisiblePopovers();
event.preventDefault();
}
function onPopoverShow(event) {
if (!visiblePopovers.length) {
$body.on("click", onBodyClick);
$body.on("keyup", onBodyKeyup);
}
visiblePopovers.Push(event.target);
}
function onPopoverHide(event) {
var target = event.target;
var index = visiblePopovers.indexOf(target);
if (index > -1) {
visiblePopovers.splice(index, 1);
}
if (visiblePopovers.length == 0) {
$body.off("click", onBodyClick);
$body.off("keyup", onBodyKeyup);
}
}
$body.on("show.bs.popover", onPopoverShow);
$body.on("hide.bs.popover", onPopoverHide);
}
https://github.com/lecar-red/bootstrapx-clickover
これはTwitter bootstrap popoverの拡張であり、問題を非常に簡単に解決します。
すべてのポップオーバーアンカーにクラスactivate_popoverを指定します。一度にそれらをすべてアクティブにします
$('body').popover({selector: '.activate-popover', html : true, container: 'body'})
私が使用するクリックアウェイ機能を機能させるために（コーヒースクリプトで）：
$(document).on('click', (e) ->
clickedOnActivate = ($(e.target).parents().hasClass("activate-popover") || $(e.target).hasClass("activate-popover"))
clickedAway = !($(e.target).parents().hasClass("popover") || $(e.target).hasClass("popover"))
if clickedAway && !clickedOnActivate
$(".popover.in").prev().popover('hide')
if clickedOnActivate
$(".popover.in").prev().each () ->
if !$(this).is($(e.target).closest('.activate-popover'))
$(this).popover('hide')
)
bootstrap 2.3.1で完全に機能します
ここには多くの解決策がありますが、私も私の提案をしたいと思います、それをすべて解決する解決策があるかどうかはわかりませんが、3つを試してみて、クリックなどの問題がありましたポップオーバーでは、それ自体が非表示になりますが、別のポップオーバーボタンをクリックした場合、両方/複数のポップオーバーがまだ表示されます（選択したソリューションのように）、これまでに
var curr_popover_btn = null;
// Hide popovers function
function hide_popovers(e)
{
var container = $(".popover.in");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
if( curr_popover_btn != null )
{
$(curr_popover_btn).popover('hide');
curr_popover_btn = null;
}
container.hide();
}
}
// Hide popovers when out of focus
$('html').click(function(e) {
hide_popovers(e);
});
$('.popover-marker').popover({
trigger: 'manual'
}).click(function(e) {
hide_popovers(e);
var $popover_btns = $('.popover-marker');
curr_popover_btn = this;
var $other_popover_btns = jQuery.grep($($popover_btns), function(popover_btn){
return ( popover_btn !== curr_popover_btn );
});
$($other_popover_btns).popover('hide');
$(this).popover('toggle');
e.stopPropagation();
});
なんらかの理由で、ここにある他のソリューションはどれもうまくいきませんでした。しかし、多くのトラブルシューティングを行った後、（少なくとも私にとっては）完全に機能するこの方法にようやく到達しました。
$('html').click(function(e) {
if( !$(e.target).parents().hasClass('popover') ) {
$('#popover_parent').popover('destroy');
}
});
私の場合、ポップオーバーをテーブルに追加し、クリックされたtdの上/下に絶対に配置していました。テーブルの選択はjQuery-UI Selectableによって処理されたため、それが干渉しているかどうかはわかりません。しかし、ポップオーバー内でクリックしたときはいつでも$('.popover')を対象としたクリックハンドラーが機能せず、イベント処理は常に$(html)クリックハンドラーに委任されました。私はJSにかなり慣れていないので、何かが足りないのでしょうか？
とにかく、これが誰かを助けることを願っています！
新しく作成されたポップオーバーにフォーカスを設定し、ぼかしで削除します。そうすれば、DOMのどの要素がクリックされ、ポップオーバーをクリックして選択できるかを確認する必要はありません。フォーカスが失われたり、消えたりすることはありません。
コード：
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
// set the focus on the popover itself
jQuery(".popover").attr("tabindex",-1).focus();
e.preventDefault();
});
// live event, will delete the popover by clicking any part of the page
$('body').on('blur','.popover',function(){
$('.popup-marker').popover('hide');
});
これは魅力のように動作し、私はそれを使用しています。
クリックするとポップオーバーが開き、もう一度クリックすると閉じます。ポップオーバーの外側をクリックすると、ポップオーバーが閉じます。
これは、複数のポップオーバーでも機能します。
function hideAllPopovers(){
$('[data-toggle="popover"]').each(function() {
if ($(this).data("showing") == "true"){
$(this).data("showing", "false");
$(this).popover('hide');
}
});
}
$('[data-toggle="popover"]').each(function() {
$(this).popover({
html: true,
trigger: 'manual'
}).click(function(e) {
if ($(this).data("showing") != "true"){
hideAllPopovers();
$(this).data("showing", "true");
$(this).popover('show');
}else{
hideAllPopovers();
}
e.stopPropagation();
});
});
$(document).click(function(e) {
hideAllPopovers();
});
これが役立つ場合、私にとって非常にうまくいった解決策があります：
/**
* Add the equals method to the jquery objects
*/
$.fn.equals = function(compareTo) {
if (!compareTo || this.length !== compareTo.length) {
return false;
}
for (var i = 0; i < this.length; ++i) {
if (this[i] !== compareTo[i]) {
return false;
}
}
return true;
};
/**
* Activate popover message for all concerned fields
*/
var popoverOpened = null;
$(function() {
$('span.btn').popover();
$('span.btn').unbind("click");
$('span.btn').bind("click", function(e) {
e.stopPropagation();
if($(this).equals(popoverOpened)) return;
if(popoverOpened !== null) {
popoverOpened.popover("hide");
}
$(this).popover('show');
popoverOpened = $(this);
e.preventDefault();
});
$(document).click(function(e) {
if(popoverOpened !== null) {
popoverOpened.popover("hide");
popoverOpened = null;
}
});
});
bootstrap 2.3.2で動作させるのに問題がありました。しかし、私はこのようにそれを愛しました：
$(function () {
$(document).mouseup(function (e) {
if(($('.popover').length > 0) && !$(e.target).hasClass('popInfo')) {
$('.popover').each(function(){
$(this).prev('.popInfo').popover('hide');
});
}
});
$('.popInfo').popover({
trigger: 'click',
html: true
});
});
この質問もここで尋ねられ、私の答えは、jQuery DOMトラバーサルメソッドを理解する方法だけでなく、外側をクリックしてポップオーバーのクローズを処理するための2つのオプションを提供します。
一度に複数のポップオーバーを開くか、一度に1つのポップオーバーを開きます。
さらに、これらの小さなコードスニペットは、アイコンを含むボタンの終了を処理できます！
別の解決策は、ポップオーバーの子孫をクリックすることで発生した問題をカバーしました。
$(document).mouseup(function (e) {
// The target is not popover or popover descendants
if (!$(".popover").is(e.target) && 0 === $(".popover").has(e.target).length) {
$("[data-toggle=popover]").popover('hide');
}
});
それが価値があるもののための私のソリューションは次のとおりです。
// Listen for clicks or touches on the page
$("html").on("click.popover.data-api touchend.popover.data-api", function(e) {
// Loop through each popover on the page
$("[data-toggle=popover]").each(function() {
// Hide this popover if it's visible and if the user clicked outside of it
if ($(this).next('div.popover:visible').length && $(".popover").has(e.target).length === 0) {
$(this).popover("hide");
}
});
});
@David Woleverソリューションを少し調整しました。
function closePopoversOnDocumentEvents() {
var visiblePopovers = [];
var $body = $("body");
function hideVisiblePopovers() {
/* this was giving problems and had a bit of overhead
$.each(visiblePopovers, function() {
$(this).popover("hide");
});
*/
while (visiblePopovers.length !== 0) {
$(visiblePopovers.pop()).popover("hide");
}
}
function onBodyClick(event) {
if (event.isDefaultPrevented())
return;
var $target = $(event.target);
if ($target.data("bs.popover"))
return;
if ($target.parents(".popover").length)
return;
hideVisiblePopovers();
}
function onBodyKeyup(event) {
if (event.isDefaultPrevented())
return;
if (event.keyCode != 27) // esc
return;
hideVisiblePopovers();
event.preventDefault();
}
function onPopoverShow(event) {
if (!visiblePopovers.length) {
$body.on("click", onBodyClick);
$body.on("keyup", onBodyKeyup);
}
visiblePopovers.Push(event.target);
}
function onPopoverHide(event) {
var target = event.target;
var index = visiblePopovers.indexOf(target);
if (index > -1) {
visiblePopovers.splice(index, 1);
}
if (visiblePopovers.length == 0) {
$body.off("click", onBodyClick);
$body.off("keyup", onBodyKeyup);
}
}
$body.on("show.bs.popover", onPopoverShow);
$body.on("hide.bs.popover", onPopoverHide);
}
$('.popForm').popover();
$('.conteneurPopForm').on("click",".fermePopover",function(){
$(".popForm").trigger("click");
});
明確にするために、ポップオーバーをトリガーするだけです
私は以下のようにします
$("a[rel=popover]").click(function(event){
if(event.which == 1)
{
$thisPopOver = $(this);
$thisPopOver.popover('toggle');
$thisPopOver.parent("li").click(function(event){
event.stopPropagation();
$("html").click(function(){
$thisPopOver.popover('hide');
});
});
}
});
お役に立てれば！
さらに簡単な解決策は、すべてのポップオーバーを反復処理し、thisでない場合は非表示にします。
$(document).on('click', '.popup-marker', function() {
$(this).popover('toggle')
})
$(document).bind('click touchstart', function(e) {
var target = $(e.target)[0];
$('.popup-marker').each(function () {
// hide any open popovers except for the one we've clicked
if (!$(this).is(target)) {
$(this).popover('hide');
}
});
});
ポップオーバーを開くポップオーバーボタン/リンクにbtn-popoverクラスを追加します。このコードは、ポップオーバーの外側をクリックするとポップオーバーを閉じます。
$('body').on('click', function(event) {
if (!$(event.target).closest('.btn-popover, .popover').length) {
$('.popover').popover('hide');
}
});
@RayOnAir、以前のソリューションと同じ問題があります。私も@RayOnAirソリューションに近づいています。改善されたものの1つは、他のポップオーバーマーカーをクリックしたときに既に開いているポップオーバーを閉じることです。だから私のコードは：
var clicked_popover_marker = null;
var popover_marker = '#pricing i';
$(popover_marker).popover({
html: true,
trigger: 'manual'
}).click(function (e) {
clicked_popover_marker = this;
$(popover_marker).not(clicked_popover_marker).popover('hide');
$(clicked_popover_marker).popover('toggle');
});
$(document).click(function (e) {
if (e.target != clicked_popover_marker) {
$(popover_marker).popover('hide');
clicked_popover_marker = null;
}
});
Twitter bootstrap popoverをpjaxで使用しようとしている場合、これはうまくいきました。
App.Utils.Popover = {
enableAll: function() {
$('.pk-popover').popover(
{
trigger: 'click',
html : true,
container: 'body',
placement: 'right',
}
);
},
bindDocumentClickEvent: function(documentObj) {
$(documentObj).click(function(event) {
if( !$(event.target).hasClass('pk-popover') ) {
$('.pk-popover').popover('hide');
}
});
}
};
$(document).on('ready pjax:end', function() {
App.Utils.Popover.enableAll();
App.Utils.Popover.bindDocumentClickEvent(this);
});
私はこれが好きで、シンプルでありながら効果的です。
var openPopup;
$('[data-toggle="popover"]').on('click',function(){
if(openPopup){
$(openPopup).popover('hide');
}
openPopup=this;
});
私はこれを思いつきました：
私のシナリオでは、同じページにさらに多くのポップオーバーがあり、それらを非表示にしただけで、ポップオーバーの背後にあるアイテムをクリックすることはできませんでした。アイデアは、特定のポップオーバーリンクを「アクティブ」としてマークし、アクティブなポップオーバーを単に「切り替える」ことです。そうすると、ポップオーバーが完全に閉じられます。
$('.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"
簡単な問題の簡単な解決策を作ろうとしていました。上記の投稿は良いですが、簡単な問題のためにとても複雑です。だから私は簡単なものを作りました。閉じるボタンを追加しました。私にぴったりです。
$(".popover-link").click(function(){
$(".mypopover").hide();
$(this).parent().find(".mypopover").show();
})
$('.close').click(function(){
$(this).parents('.mypopover').css('display','none');
});
<div class="popover-content">
<i class="fa fa-times close"></i>
<h3 class="popover-title">Title here</h3>
your other content here
</div>
.popover-content {
position:relative;
}
.close {
position:absolute;
color:#CCC;
right:5px;
top:5px;
cursor:pointer;
}
彼のソリューションがクラス「popup-marker」を持つすべての要素でpopover（ 'hide'）をアクティブ化したため、これは上記のpbaronの提案の修正されたソリューションであることがわかりました。ただし、以下で行うように、データコンテンツではなくhtmlコンテンツにpopover（）を使用している場合、そのhtmlポップアップ内でクリックすると、実際にpopover（ 'hide'）がアクティブになり、ウィンドウがすぐに閉じます。以下のこのメソッドは、各.popup-marker要素を反復処理して、親がクリックされた.popup-markerのIDに関連しているかどうかを最初に検出し、関連する場合は非表示にしません。他のすべてのdivは非表示です...
$(function(){
$('html').click(function(e) {
// this is my departure from pbaron's code above
// $('.popup-marker').popover('hide');
$('.popup-marker').each(function() {
if ($(e.target).parents().children('.popup-marker').attr('id')!=($(this).attr('id'))) {
$(this).popover('hide');
}
});
});
$('.popup-marker').popover({
html: true,
// this is where I'm setting the html for content from a nearby hidden div with id="html-"+clicked_div_id
content: function() { return $('#html-'+$(this).attr('id')).html(); },
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.stopPropagation();
});
});