Bir Twitter Bootstrap popover'ı sayfanın herhangi bir yerinden (başka) bir tıklamayla nasıl kapatabilirim?

Şu anda böyle başlatılan Twitter Bootstrap ile popovers kullanıyorum:

$('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).click(function(e) {
        $(this).popover('toggle');
        e.preventDefault();
    });

Gördüğünüz gibi, manuel olarak tetiklenirler ve .popup-marker'i (arka plan resimli bir div olan) tıklamak bir popover'ı değiştirir. Bu harika çalışıyor, ancak popover'ı sayfada başka bir yere tıklatarak da kapatmak istiyorum (ancak popover'ın kendisinde değil!).

Aşağıdakiler de dahil olmak üzere birkaç farklı şey denedim, ancak bunun için gösterilecek sonuç yok:

$('body').click(function(e) {
    $('.popup-marker').popover('hide');
});

Popover'ı sayfanın herhangi bir yerinde bir tıklama ile nasıl kapatabilirim, ancak popover'ın kendisine bir tıklama ile nasıl kapatabilirim?

Herhangi bir anda yalnızca bir popover görülebileceğini varsayarsak, bir popover olduğunda işaretlemek için bir bayrak kümesi kullanabilir ve ancak bunları gizleyebilirsiniz.

Olay dinleyicisini belge gövdesine ayarlarsanız, 'açılır işaretleyici' ile işaretlenmiş öğeyi tıklattığınızda tetiklenir. Yani aramalısınstopPropagation() olay nesnesini . Ve popover üzerine tıklarken aynı numarayı uygulayın.

Aşağıda, bunu yapan çalışan bir JavaScript kodu bulunmaktadır. JQuery> = 1.7 kullanır

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/

Tek uyarı, aynı anda 2 popoveri açamayacağınızdır. Ama yine de bu kullanıcı için kafa karıştırıcı olacağını düşünüyorum :-)

Bu daha da kolay:

$('html').click(function(e) {
    $('.popup-marker').popover('hide');
});

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});

Benzer bir ihtiyacım vardı ve Lee Carmichael'ın BootstrapX - clickover adlı Twitter Bootstrap Popover'ın bu küçük uzantısını buldum . Burada da bazı kullanım örnekleri var . Temel olarak, popover'ı sayfanın başka bir yerine veya popover içindeki bir kapat düğmesine tıkladığınızda kapanacak etkileşimli bir bileşene dönüştürür. Bu aynı zamanda birden fazla poposun aynı anda açılmasına ve diğer birçok güzel özelliğe izin verecektir.

Eklenti burada bulunabilir .

Kullanım örneği

<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();

Kabul edilen çözüm bana bazı sorunlar verdi (açılan popover'ın '.popup-marker' öğesini tıklamak poposerların daha sonra çalışmamasını sağladı). Benim için mükemmel çalışan bu diğer çözümü buldum ve oldukça basit (Bootstrap 2.3.1 kullanıyorum):

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

GÜNCELLEME: Bu kod Bootstrap 3 ile de çalışır!

"Bir sonraki tıklamayla reddet" i buradan oku http://getbootstrap.com/javascript/#popovers

Bir sonraki tıklamayla popo'ları kapatmak için odak tetikleyicisini kullanabilirsiniz, ancak <a>etiketi değil etiketi kullanmanız <button>gerekir ve ayrıca bir tabindexözellik eklemeniz gerekir ...

Misal:

<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>

Mevcut tüm yanıtlar, tüm belge olaylarını yakaladıktan sonra etkin popovers'ı bulmaya veya çağrıyı değiştirmeye bağlı olduklarından oldukça zayıftır .popover().

Çok daha iyi bir yaklaşım, show.bs.popoverbelgenin vücudundaki olayları dinlemek ve buna göre tepki vermektir. Aşağıda, belge tıklatıldığında veya escbasıldığında popovers'ı kapatacak olan kod vardır , yalnızca popovers gösterildiğinde bağlayıcı olay dinleyicileri:

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

Bu twitter bootstrap popover'ın bir uzantısıdır ve sorunu çok basit bir şekilde çözecektir.

Bir nedenden dolayı, buradaki diğer çözümlerin hiçbiri benim için çalışmadı. Ancak, bir çok sorun giderme işleminden sonra, nihayet mükemmel çalışan bu yönteme vardım (en azından benim için).

$('html').click(function(e) {
  if( !$(e.target).parents().hasClass('popover') ) {
    $('#popover_parent').popover('destroy');
  }
});

Benim durumumda bir masaya bir popover ekledi ve kesinlikle o tdtıklananın üstünde / altında konumlandırma . Tablo seçimi jQuery-UI Selectable tarafından işlendi, bu yüzden müdahalede olup olmadığından emin değilim. Ancak popover'ı her tıkladığımda, hedeflenen tıklama işleyicim $('.popover')hiç çalışmadı ve etkinlik işleme her zaman$(html) tıklama işleyicisine . JS için oldukça yeniyim, bu yüzden belki de sadece bir şey kaçırıyorum?

Neyse umarım bu birine yardım eder!

Bütün popovers'ımı sınıfı tutturuyorum activate_popover. Hepsini birden yüklerken etkinleştiriyorum

$('body').popover({selector: '.activate-popover', html : true, container: 'body'})

kullandığım tıklama işlevini (kahve komut dosyasında) almak için:

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

Hangi bootstrap 2.3.1 ile mükemmel çalışıyor

Burada çok fazla çözüm olsa da, benimkini de önermek istiyorum, orada hepsini çözen bir çözüm olup olmadığını bilmiyorum, ama 3 tanesini denedim ve tıklamak gibi sorunları vardı popover üzerinde kendini gizlemek yapar, diğerleri ben başka bir popover düğmeler tıkladı olsaydı her iki / birden popovers hala (seçilen çözümde olduğu gibi) görüneceğini, Nasıl hiç, Bu bir hepsini düzeltti

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

Odağı yeni oluşturulan pop-over'e ayarlayıp bulanıklıktan kaldırırdım. Bu şekilde, DOM'un hangi öğesinin tıklandığını ve pop-over'in tıklanıp seçilebileceğini kontrol etmek gerekmez: odak noktasını kaybetmez ve kaybolmaz.

Kod:

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

İşte size yardımcı olabilecek bir çözüm, benim için çok iyi çalıştı:

/**
* 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;
        }        
    });
});

İşte benim çözümüm, buna değer:

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

  });
});

Bootstrap 2.3.2 üzerinde çalışmasını sağlamak için bazı problemlerim vardı. Ama ben bu şekilde eğildim:

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

@David Wolever çözümü biraz değiştirildi:

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);
}

Bu soru burada da sorulmuştur ve cevabım sadece jQuery DOM geçiş yöntemlerini anlamanın bir yolunu değil, dışarıya tıklayarak popovers'ın kapanmasını ele almak için 2 seçenek sunar.

Aynı anda birden fazla popover veya bir seferde bir popover açın.

Ayrıca bu küçük kod parçacıkları, simgeler içeren düğmelerin kapanmasını işleyebilir!

https://stackoverflow.com/a/14857326/1060487

Bu bir cazibe gibi çalışıyor ve ben kullanıyorum.

Tıklattığınızda popover açılacak ve tekrar tıklarsanız kapanacak, eğer popover dışında tıklarsanız popover kapatılacaktır.

Bu, 1'den fazla popover ile de çalışır.

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

Başka bir çözüm, popover torunları tıklama ile yaşadım sorunu ele:

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

Aşağıdaki gibi yaparım

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

Bu yardımcı olur umarım!

Pjax ile twitter bootstrap popover kullanmaya çalışıyorsanız, bu benim için çalıştı:

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);
});

@ RayOnAir, önceki çözümlerle aynı sorunu yaşıyorum. Ben de @ RayOnAir çözüm yakın geliyor. Geliştirilmiş bir şey, diğer popover işaretleyicisine tıkladığınızda zaten açılan popover. Yani kodum:

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;
  }
});

Bunu yukarıdaki pbaron'un önerisinin değiştirilmiş bir çözümü olarak buldum, çünkü çözümü 'pop-marker' sınıfına sahip tüm elemanlarda popover'ı ('gizle') aktive etti. Ancak, aşağıda yaptığım gibi, veri içeriği yerine html içeriği için popover () kullandığınızda, html pop-up'ının içindeki tıklamalar aslında pencereyi hemen kapatan popover'ı ('gizle') etkinleştirir. Aşağıdaki bu yöntem her bir .popup-marker öğesini yineler ve önce üst öğenin tıklatılan .popup-marker kimliğiyle ilişkili olup olmadığını keşfeder ve eğer öyleyse onu gizlemez. Diğer tüm div'ler gizlidir ...

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

Ben bununla geldim:

Senaryomda aynı sayfada daha fazla popover vardı ve onları gizlemek onları görünmez yaptı ve bu nedenle popover'ın arkasındaki öğelere tıklamak mümkün değildi. Fikir, belirli popover bağlantısını 'aktif' olarak işaretlemektir ve daha sonra aktif popover'ı 'değiştirebilirsiniz'. Aksi takdirde popover tamamen kapanacaktır.

$('.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"

Basit bir sorun için basit bir çözüm bulmaya çalışıyordum. Yukarıdaki mesajlar iyi ama basit bir sorun için çok karmaşık. Böylece basit bir şey yaptım. Bir kapatma düğmesi ekledim. Benim için mükemmel.

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

Bunu beğendim, basit ama etkili ..

var openPopup;

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

    }
    openPopup=this;
});

Ekle btn-popoverpopover açar senin popover düğmesi / bağlantısına sınıfı. Bu kod, dışına tıkladığınızda popo'ları kapatır.

$('body').on('click', function(event) {
  if (!$(event.target).closest('.btn-popover, .popover').length) {
    $('.popover').popover('hide');
  }
});

Daha da kolay bir çözüm, tüm popovers üzerinden tekrarlayın ve değilse saklayın 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');
        }
    });
});

$('.popForm').popover();

$('.conteneurPopForm').on("click",".fermePopover",function(){
    $(".popForm").trigger("click");
});

Açık olmak gerekirse, popover'ı tetikleyin

Bu Bootstrap 4'te çalışmalıdır:

$("#my-popover-trigger").popover({
  template: '<div class="popover my-popover-content" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>',
  trigger: "manual"
})

$(document).click(function(e) {
  if ($(e.target).closest($("#my-popover-trigger")).length > 0) {
    $("#my-popover-trigger").popover("toggle")
  } else if (!$(e.target).closest($(".my-popover-content")).length > 0) {
    $("#my-popover-trigger").popover("hide")
  }
})

Açıklama:

• İlk bölüm popover'ı dokümanlara göre başlatır: https://getbootstrap.com/docs/4.0/components/popovers/
• İkinci bölümdeki ilk "if", tıklanan öğenin # my-popover-trigger öğesinin torunu olup olmadığını kontrol eder. Bu doğruysa, popover'ı değiştirir (tetiğe tıklamayı işler).
• İkinci bölümdeki ikinci "if", tıklanan öğenin init şablonunda tanımlanan popover içerik sınıfının soyundan olup olmadığını kontrol eder. Bu değilse, tıklamanın popover içeriğinin içinde olmadığı ve popover gizlenebileceği anlamına gelir.

data-trigger="focus"Bunun yerine deneyin "click".

Bu benim için problemi çözdü.