Jak mogę zamknąć wyskakujące okienko Twittera za pomocą kliknięcia z dowolnego miejsca (innego) na stronie?

To jest jeszcze łatwiejsze:

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

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

Miałem podobną potrzebę i znalazłem towielkie, małe rozszerzenie Popover na Twitterze autorstwa Lee Carmichaela, o nazwie BootstrapX - clickover . Ma również kilka przykładów użycia TUTAJ . Zasadniczo zmieni wyskakujące okienko w interaktywny komponent, który zostanie zamknięty po kliknięciu w innym miejscu na stronie lub przycisku zamykania w wyskakującym okienku. Pozwoli to również na otwarcie wielu popoverów naraz i kilka innych fajnych funkcji.

Wtyczkę można znaleźć tutaj .

Przykład użycia

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

Przyjęte rozwiązanie dało mi pewne problemy (klikając na '.popup-znacznik' element otwartego popowera sprawiał, że popowery nie działały później). Wymyśliłem inne rozwiązanie, które działa dla mnie idealnie i jest dość proste (używam 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');
    }
});

Aktualizacja: ten kod działa również z Bootstrap 3!

Czytaj " Odrzuć przy następnym kliknięciu" tutaj http://getbootstrap.com/javascript/#popovers

Możesz użyć wyzwalacza ostrości, aby odrzucić wyskakujące okienka przy następnym kliknięciu, ale musisz użyć znacznika <a>, a nie znacznika <button>, a także musisz dołączyć atrybut tabindex...

Przykład:

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

Wszystkie istniejące odpowiedzi są dość słabe, ponieważ polegają na przechwytywaniu wszystkich zdarzeń dokumentu, a następnie znajdowaniu aktywnych popoverów lub modyfikowaniu wywołania do .popover().

Znacznie lepszym podejściem jest odsłuchiwanie show.bs.popover zdarzeń na ciele dokumentu, a następnie odpowiednie reagowanie. Poniżej znajduje się kod, który zamknie wyskakujące okienka po kliknięciu dokumentu lub naciśnięciu esc , tylko wiążące nasłuchy zdarzeń, gdy pojawią się wyskakujące okienka:

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

Jest to rozszerzenie Twitter Bootstrap popover i rozwiąże problem bardzo prosto.

Z jakiegoś powodu żadne z innych rozwiązań tutaj nie działało dla mnie. Jednak po wielu problemach, w końcu doszedłem do tej metody, która działa doskonale (przynajmniej dla mnie).

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

W moim przypadku dodawałem popover do tabeli i absolutnie pozycjonowałem ją powyżej / poniżej td, który został kliknięty. Wybór tabeli był obsługiwany przez jQuery-UI Selectable więc nie jestem pewien, czy to przeszkadzało. Jednak za każdym razem, gdy kliknąłem w wyskakującym oknie, Mój program obsługi kliknięć, który celował $('.popover') nigdy nie działało, a obsługa zdarzeń była zawsze delegowana do obsługi kliknięć $(html). Jestem całkiem nowy w JS, więc może coś mi umyka?

W każdym razie mam nadzieję, że to komuś pomoże!

Daję wszystkim moim popowersom klasę activate_popover. Aktywuję je wszystkie na raz onload

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

Aby uruchomić funkcjonalność click away używam (w skrypcie coffee):

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

Który działa doskonale z bootstrap 2.3.1

Mimo, że jest tu wiele rozwiązań, chciałbym zaproponować również moje, Nie wiem, czy istnieje jakieś rozwiązanie, które rozwiązuje to wszystko, ale próbowałem 3 z nich i mieli problemy, takie jak kliknięcie w wyskakujące samo powoduje ukrycie, Inne, że gdybym miał inny przycisk wyskakujący kliknął oba / wiele wyskakujących nadal pojawiłoby się (jak w wybranym rozwiązaniu), jak kiedykolwiek, Ten naprawił to wszystko

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

Oto rozwiązanie, które działało bardzo dobrze dla mnie, jeśli może pomóc:

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

Oto moje rozwiązanie, jeśli to coś warte:

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

  });
});

Miałem problem z uruchomieniem bootstrap 2.3.2. Ale ja tak:

$(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 rozwiązanie lekko:

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

To pytanie zostało również zadane tutaj i moja odpowiedź zapewnia nie tylko sposób na zrozumienie metod jQuery DOM, ale 2 opcje obsługi zamykania popowerów przez kliknięcie na zewnątrz.

Otwórz wiele okienek naraz lub jedno okienko na raz.

Plus te małe fragmenty kodu mogą obsługiwać zamykanie przycisków zawierających ikony!

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

Ten działa jak czar, a ja go używam.

Otworzy wyskakujące po kliknięciu i jeśli klikniesz ponownie, zamknie się, również jeśli klikniesz poza wyskakującym, wyskakujące zostanie zamknięte.

To również działa z więcej niż 1 popover.

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

Ustawiłbym ostrość na nowo utworzony pop-over i usunąłbym go przy rozmyciu. W ten sposób nie trzeba sprawdzać, który element DOM został kliknięty, a wyskakujące okienko można kliknąć, a także wybrać: nie straci ostrości i nie zniknie.

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

Robię to jak poniżej

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

Jeśli próbujesz użyć twitter Bootstrap popover z pjax, to zadziałało dla mnie:

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, mam ten sam problem z wcześniejszymi rozwiązaniami. Ja też zbliżam się do @rayonair solution. Jedną z rzeczy, które się poprawiły, jest zamknięcie już otwartego popover po kliknięciu innego znacznika popover. Więc mój kod to:

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

Uznałem to za zmodyfikowane rozwiązanie powyższej sugestii pbarona, ponieważ jego rozwiązanie aktywowało popover ('hide') na wszystkich elementach z klasą'popup-marker'. Jednak, gdy używasz popover () dla zawartości html zamiast danych-zawartości, jak robię poniżej, wszelkie kliknięcia wewnątrz tego wyskakującego okna html faktycznie aktywują popover ('hide'), co natychmiast zamyka okno. Ta metoda jest następująca dla każdej z nich .popup - element znacznika i odkrywa najpierw, czy rodzic jest związany z .popup-identyfikator znacznika, który został kliknięty, a jeśli tak, to nie ukrywa go. Wszystkie inne divy są ukryte...

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

Wymyśliłem to:

Mój scenariusz zawierał więcej popowerów na tej samej stronie, a ich ukrywanie sprawiało, że były niewidoczne i dlatego klikanie na przedmioty za popowerem nie było możliwe. Chodzi o to, aby oznaczyć konkretne wyskakujące łącze jako "aktywne", a następnie możesz po prostu "przełączyć" aktywne wyskakujące łącze. Spowoduje to całkowite zamknięcie popover.

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

Starałem się zrobić proste rozwiązanie dla prostego problemu. Powyższe posty są dobre, ale tak skomplikowane dla prostego problemu. Więc zrobiłem prostą rzecz. Właśnie dodałem przycisk zamykania. Jest idealny dla mnie.

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

Podoba mi się to, proste, ale skuteczne..

var openPopup;

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

    }
    openPopup=this;
});

Dodaj btn-popover klasę do przycisku/linku wyskakującego, który otwiera wyskakujące okienko. Ten kod zamknie wyskakujące okienka po kliknięciu na zewnątrz.

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

Jeszcze łatwiejsze rozwiązanie, wystarczy przejrzeć wszystkie wyskakujące okienka i ukryć, jeśli nie 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");
});

Aby było jasne, po prostu uruchom popover

Inne rozwiązanie, obejmowało problem, który miałem z kliknięciem w wyskakujące okienko:

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

Spróbuj data-trigger="focus" zamiast "click".

jQuery(':not(.popup-marker)').once().click(function(){
   jQuery('.popup-marker').hide(); 
});