Bagaimana saya bisa menutup popover Bootstrap Twitter dengan klik dari mana saja (selain itu) di halaman?

Saat ini saya menggunakan popover dengan Twitter Bootstrap, dimulai seperti ini:

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

Seperti yang Anda lihat, mereka dipicu secara manual, dan mengklik .popup-marker (yang merupakan div dengan gambar latar belakang) mengaktifkan popover. Ini berfungsi dengan baik, tetapi saya ingin juga dapat menutup popover dengan klik di tempat lain pada halaman (tetapi tidak pada popover itu sendiri!).

Saya sudah mencoba beberapa hal yang berbeda, termasuk yang berikut, tetapi tanpa hasil untuk menunjukkan untuk itu:

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

Bagaimana saya bisa menutup popover dengan klik di tempat lain pada halaman, tetapi tidak dengan klik pada popover itu sendiri?

Menganggap bahwa hanya satu popover dapat terlihat kapan saja, Anda dapat menggunakan satu set bendera untuk menandai ketika ada popover yang terlihat, dan hanya kemudian menyembunyikannya.

Jika Anda mengatur pendengar acara di badan dokumen, itu akan memicu ketika Anda mengklik elemen yang ditandai dengan 'popup-marker'. Jadi, Anda harus meneleponstopPropagation() objek acara. Dan terapkan trik yang sama ketika mengklik popover itu sendiri.

Di bawah ini adalah kode JavaScript yang berfungsi yang melakukan ini. Ini menggunakan 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/

Satu-satunya peringatan adalah bahwa Anda tidak akan dapat membuka 2 popover secara bersamaan. Tapi saya pikir itu akan membingungkan bagi pengguna :-)

Ini bahkan lebih mudah:

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

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

Saya memiliki kebutuhan yang serupa, dan menemukan ekstensi kecil yang luar biasa dari Popover Bootstrap Twitter oleh Lee Carmichael, yang disebut BootstrapX - clickover . Dia juga memiliki beberapa contoh penggunaan di sini . Pada dasarnya itu akan mengubah popover menjadi komponen interaktif yang akan ditutup ketika Anda mengklik di tempat lain pada halaman, atau pada tombol tutup di dalam popover. Ini juga akan memungkinkan beberapa popover terbuka sekaligus dan banyak fitur bagus lainnya.

Plugin dapat ditemukan di sini .

Contoh penggunaan

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

Solusi yang diterima memberi saya beberapa masalah (mengklik elemen '.popup-marker' pada popover yang terbuka membuat popover tidak berfungsi setelahnya). Saya datang dengan solusi lain ini yang bekerja sempurna untuk saya dan itu cukup sederhana (saya menggunakan 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');
    }
});

UPDATE: Kode ini juga berfungsi dengan Bootstrap 3!

baca "Abaikan klik berikutnya" di sini http://getbootstrap.com/javascript/#popovers

Anda dapat menggunakan pemicu fokus untuk mengabaikan popover pada klik berikutnya, tetapi Anda harus menggunakan <a>tag, bukan <button>tag, dan Anda juga harus menyertakan tabindexatribut ...

Contoh:

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

Semua jawaban yang ada cukup lemah, karena mereka mengandalkan menangkap semua peristiwa dokumen kemudian menemukan popover aktif, atau mengubah panggilan ke .popover().

Pendekatan yang jauh lebih baik adalah dengan mendengarkan show.bs.popoveracara di badan dokumen lalu bereaksi sesuai. Di bawah ini adalah kode yang akan menutup popover ketika dokumen diklik atau escditekan, hanya mengikat pendengar acara ketika popover ditampilkan:

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

Ini adalah ekstensi popover bootstrap twitter dan akan memecahkan masalah dengan sangat sederhana.

Untuk beberapa alasan tidak ada solusi lain di sini yang berfungsi untuk saya. Namun, setelah banyak pemecahan masalah, akhirnya saya sampai pada metode ini yang berfungsi dengan baik (setidaknya untuk saya).

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

Dalam kasus saya, saya menambahkan popover ke tabel dan benar-benar memposisikannya di atas / di bawah tdyang diklik. Pilihan tabel ditangani oleh jQuery-UI Dipilih jadi saya tidak yakin apakah itu mengganggu. Namun setiap kali saya mengklik di dalam popover handler klik saya yang ditargetkan $('.popover')tidak pernah bekerja dan penanganan acara selalu didelegasikan ke$(html) penangan klik. Saya cukup baru di JS jadi mungkin saya hanya melewatkan sesuatu?

Bagaimanapun saya harap ini membantu seseorang!

Saya memberikan semua popovers saya jangkar kelas activate_popover. Saya mengaktifkan semuanya sekaligus onload

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

agar fungsi klik jauhnya berfungsi, saya menggunakan (dalam skrip kopi):

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

Yang berfungsi dengan sangat baik dengan bootstrap 2.3.1

Meskipun ada banyak solusi di sini, saya ingin mengusulkan juga, saya tidak tahu apakah ada solusi di sana yang menyelesaikan semuanya, tetapi saya mencoba 3 dari mereka dan mereka memiliki masalah, seperti mengklik pada popover itu membuatnya bersembunyi, yang lain bahwa jika saya memiliki tombol popover lain diklik keduanya / beberapa popover akan tetap muncul (seperti dalam solusi yang dipilih), Bagaimana pun, yang satu ini memperbaiki semuanya

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

Saya akan mengatur fokus ke pop-over yang baru dibuat dan menghapusnya pada blur. Dengan begitu tidak perlu memeriksa elemen DOM mana yang telah diklik dan pop-over dapat diklik, dan dipilih juga: elemen tidak akan kehilangan fokus dan tidak akan hilang.

Kode:

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

Inilah solusi yang bekerja sangat baik untuk saya, jika dapat membantu:

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

Inilah solusi saya, untuk apa nilainya:

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

  });
});

Saya punya beberapa masalah untuk membuatnya bekerja pada bootstrap 2.3.2. Tetapi saya melakukannya dengan cara ini:

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

tweaked @David Wolever solusi sedikit:

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

Pertanyaan ini juga ditanyakan di sini dan jawaban saya tidak hanya menyediakan cara untuk memahami metode traversal DOM jQuery tetapi 2 opsi untuk menangani penutupan popover dengan mengklik di luar.

Buka beberapa popover sekaligus atau satu popover sekaligus.

Plus potongan kode kecil ini dapat menangani penutupan tombol yang berisi ikon!

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

Yang ini berfungsi seperti mantra dan saya menggunakannya.

Ini akan membuka popover ketika Anda mengklik dan jika Anda mengklik lagi itu akan ditutup, juga jika Anda mengklik di luar popover popover akan ditutup.

Ini juga berfungsi dengan lebih dari 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();
});

Solusi lain, itu mencakup masalah yang saya miliki dengan mengklik keturunan popover:

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

Saya melakukannya seperti di bawah ini

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

Semoga ini membantu!

Jika Anda mencoba menggunakan popover bootstrap twitter dengan pjax, ini berhasil bagi saya:

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, saya memiliki masalah yang sama dengan solusi sebelumnya. Saya mendekati solusi @RayOnAir juga. Satu hal yang ditingkatkan adalah tutup popover yang sudah dibuka ketika mengklik penanda popover lainnya. Jadi kode saya adalah:

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

Saya menemukan ini menjadi solusi modifikasi dari saran pbaron di atas, karena solusinya mengaktifkan popover ('hide') pada semua elemen dengan kelas 'popup-marker'. Namun, ketika Anda menggunakan popover () untuk konten html alih-alih data-konten, seperti yang saya lakukan di bawah, setiap klik di dalam popup html tersebut sebenarnya mengaktifkan popover ('sembunyikan'), yang segera menutup jendela. Metode di bawah ini mengulangi setiap elemen .popup-marker dan menemukan terlebih dahulu jika induknya terkait dengan id .popup-marker yang diklik, dan jika demikian maka tidak menyembunyikannya. Semua div lainnya disembunyikan ...

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

Saya datang dengan ini:

Skenario saya mencakup lebih banyak popover di halaman yang sama, dan menyembunyikannya hanya membuat mereka tidak terlihat dan karena itu, mengklik item di belakang popover itu tidak mungkin. Idenya adalah untuk menandai tautan popover tertentu sebagai 'aktif' dan kemudian Anda cukup 'mengganti' popover aktif. Melakukannya akan menutup popover sepenuhnya.

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

Saya mencoba membuat solusi sederhana untuk masalah sederhana. Posting di atas baik tetapi sangat rumit untuk masalah sederhana. Jadi saya membuat hal yang sederhana. Baru saja menambahkan tombol tutup. Sempurna untukku.

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

Saya suka ini, sederhana namun efektif ..

var openPopup;

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

    }
    openPopup=this;
});

Tambahkan btn-popoverkelas ke tombol / tautan popover Anda yang membuka popover. Kode ini akan menutup popover ketika mengklik di luarnya.

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

Solusi yang bahkan lebih mudah, hanya mengulangi semua popover dan bersembunyi jika tidak 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");
});

Agar jelas, cukup picu popover

Ini seharusnya bekerja di Bootstrap 4:

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

Penjelasan:

• Bagian pertama menandai popover sesuai dokumen: https://getbootstrap.com/docs/4.0/components/popovers/
• "Jika" pertama di bagian kedua memeriksa apakah elemen yang diklik adalah turunan dari # my-popover-trigger. Jika itu benar, ini akan mengaktifkan popover (menangani klik pada pelatuk).
• Yang kedua "jika" di bagian kedua memeriksa apakah elemen yang diklik adalah turunan dari kelas konten popover yang didefinisikan dalam templat init. Jika tidak, ini berarti klik tidak ada di dalam konten popover, dan popover dapat disembunyikan.

Coba data-trigger="focus"alih-alih "click".

Ini memecahkan masalah bagi saya.