Bagaimana cara menghilangkan popover Bootstrap Twitter dengan mengklik di luar?

289

Bisakah kita membuat popover dapat diberhentikan dengan cara yang sama seperti modals, yaitu. membuat mereka tutup ketika pengguna mengklik suatu tempat di luar mereka?

Sayangnya saya tidak bisa hanya menggunakan modal nyata daripada popover, karena modal berarti posisi: tetap dan itu bukan popover lagi. :(

Ante Vrli
sumber
3
Pertanyaan serupa: stackoverflow.com/q/8947749/1478467
Sherbrow
Coba stackoverflow.com/a/40661543/5823517 ini . Tidak melibatkan perulangan melalui orang tua
Tunn
data-trigger="hover"dan data-trigger="focus"merupakan alternatif bawaan untuk menutup popover, jika Anda tidak ingin menggunakan sakelar. Menurut pendapat saya, data-trigger="hover"memberikan pengalaman pengguna terbaik ... tidak perlu menulis kode ekstra .js ...
Hooman Bahreini

Jawaban:

461

Pembaruan: Solusi yang sedikit lebih kuat: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Untuk tombol yang hanya berisi teks:

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

Untuk tombol yang berisi ikon digunakan (kode ini memiliki bug di Bootstrap 3.3.6, lihat perbaikan di bawah dalam jawaban ini)

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

Untuk Penggunaan Popovers Generasi JS'[data-original-title]' sebagai pengganti'[data-toggle="popover"]'

Peringatan: Solusi di atas memungkinkan beberapa popover terbuka sekaligus.

Tolong satu popover sekaligus:

Pembaruan: Bootstrap 3.0.x, lihat kode atau biola http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Ini menangani penutupan popover yang sudah terbuka dan tidak diklik atau tautannya belum diklik.


Pembaruan: Bootstrap 3.3.6, lihat biola

Memperbaiki masalah di mana setelah penutupan, membutuhkan 2 klik untuk membuka kembali

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {                
            (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

Pembaruan: Menggunakan persyaratan peningkatan sebelumnya, solusi ini tercapai. Perbaiki masalah klik ganda dan popover hantu:

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});
mattdlockyer
sumber
2
Saya lampirkan $(document)bukan $('body')karena kadang-kadang bodytidak memperpanjang seluruh halaman.
Jasop
6
Setelah mengaktifkan popover (dan tindakan sembunyikan berikutnya), popover tidak sepenuhnya disembunyikan; itu tidak terlihat. Masalahnya adalah bahwa konten di bawah popover yang tidak terlihat namun sekarang tidak dapat diklik atau di-hover. Masalah terjadi pada build Chrome terbaru, bootstrap 3 .js terbaru (bisa juga browser lain, tidak dapat diganggu untuk diperiksa karena penyelesaian ini harus tetap dilakukan)
ravb79
6
Alih-alih '[data-toggle="popover"]', yang tidak berfungsi dengan JavaScript yang dihasilkan popovers, saya gunakan '[data-original-title]'sebagai pemilih.
Nathan
4
Adakah yang tahu mengapa solusi ini tidak bekerja dengan versi terbaru dari bootstrap? Berikut ini terjadi: Klik tombol untuk menampilkan popover, lalu klik badan untuk mengabaikan popover, lalu klik tombol untuk menampilkan popover dan popover tidak muncul. Setelah gagal sekali jika Anda mengkliknya lagi itu menunjukkan. Ini sangat aneh.
JTunney
3
@JTunney Saya menjalankan BS 3.3.6 dan masih melihat perilaku di mana ia membutuhkan dua klik untuk membuka popoever setelah mengabaikan satu.
sersun
65
$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

Ini menutup semua popover jika Anda mengklik di mana saja kecuali pada popover

UPDATE untuk Bootstrap 4.1

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});
pengguna28490
sumber
Saya menambahkan kelas ke tombol yang memicu popover (pop-btn) sehingga tidak termasuk ... if (! $ (E.target) .closest ('. Popover'). Length &&! $ (E. target) .closest ('. btn'). hasClass ('pop-btn'))
mozgras
2
dengan 3 tombol popover, kode ini membuat masalah. dalam beberapa kasus saya tidak bisa mengklik tombol dan tombol yang di-flash.
OpenCode
1
Kode ini tidak bisa berfungsi ... periksa biola ini dan tambahkan biola ke jawaban Anda. jsfiddle.net/C5GBU/102
mattdlockyer
Sempurna untukku. Jawaban lain memiliki efek samping ketika "klik luar" saya terjadi untuk membuka popover baru.
Rasio Facio
Ini berfungsi dengan baik, tetapi perlu memiliki cara untuk mengadaptasi ini sehingga jika Anda mengklik konten popover, itu tidak menutup. mis. jika Anda mengklik teks di dalam tag <b> di dalam popover ...
Ben di CA
40

Versi paling sederhana, paling aman gagal , bekerja dengan versi bootstrap apa pun.

Demo: http://jsfiddle.net/guya/24mmM/

Demo 2: Tidak menolak ketika mengklik di dalam konten popover http://jsfiddle.net/guya/fjZja/

Demo 3: Beberapa popovers: http://jsfiddle.net/guya/6YCjW/


Cukup menelepon saluran ini akan mengabaikan semua popover:

$('[data-original-title]').popover('hide');

Singkirkan semua popover saat mengklik di luar dengan kode ini:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

Cuplikan di atas melampirkan acara klik di badan. Ketika pengguna mengklik sembulan, itu akan berperilaku seperti biasa. Ketika pengguna mengklik sesuatu yang bukan popover, ia akan menutup semua popover.

Ini juga akan berfungsi dengan popover yang diawali dengan Javascript, sebagai lawan dari beberapa contoh lain yang tidak akan berfungsi. (lihat demo)

Jika Anda tidak ingin mengabaikan ketika mengklik di dalam konten popover, gunakan kode ini (lihat tautan ke demo ke-2):

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});
guya
sumber
3
Punya masalah yang sama dan ini bekerja di Bootstrap 3.
wsams
Jika Anda mendekatkan popover sedemikian rupa sehingga popover tumpang tindih, ketika Anda menyembunyikan popover dengan mengklik di suatu tempat di luar, salah satu tautan berhenti bekerja. Periksa: jsfiddle.net/qjcuyksb/1
Sandeep Giri
1
Versi terakhir tidak berfungsi saat menggunakan bootstrap-datepicker di popover.
dbinott
1
Saya menyukai solusi ini yang terbaik, karena jawaban yang diterima mulai menjadi sedikit sumber daya dengan 30 popup
David G
1
Mungkin !$(e.target).closest('.popover.in').lengthakan lebih efisien daripada !$(e.target).parents().is('.popover.in').
joeytwiddle
19

Dengan bootstrap 2.3.2 Anda dapat mengatur pemicu untuk 'fokus' dan hanya berfungsi:

$('#el').popover({trigger:'focus'});
periklis
sumber
1
+1, tetapi catatan penting: Ini tidak menutup popover, jika Anda mengklik lagi tombol atau jangkar, sedangkan jawaban yang diterima tidak.
Christian Gollhardt
18

Ini pada dasarnya tidak terlalu rumit, tetapi ada beberapa pemeriksaan yang harus dilakukan untuk menghindari gangguan.

Demo (jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});
Sherbrow
sumber
2
ini menghilangkan modal dengan mengklik di mana saja tidak di luar
hienbt88
Mungkinkah melakukan ini dengan popover()klik bukan melayang?
Zaki Aziz
3
Tentu saja, tetapi Anda harus memanggil stopPropagation()acara yang diteruskan ke penangan klik (jika tidak, penangan bersembunyi segera menyembunyikan popover). Demo (jsfiddle)
Sherbrow
Saya memiliki fungsi yang sama di bawah ini dalam kode yang jauh lebih sedikit. Jawaban ini membengkak dan sedikit konyol untuk pertanyaan ... Yang dia inginkan adalah menutup popover ketika Anda mengklik di luar ... Ini berlebihan dan MURAH!
mattdlockyer
2
Koreksi, saya percaya saya memiliki fungsi LEBIH BAIK dalam kode JAUH kurang. Diasumsikan Anda hanya ingin satu popup pada satu waktu terlihat. Jika Anda suka ini, silakan jawab jawaban saya di bawah ini: jsfiddle.net/P3qRK/1 jawaban: stackoverflow.com/a/14857326/1060487
mattdlockyer
16

Tidak ada solusi yang seharusnya dipilih untuk saya dengan benar. Masing-masing mengarah ke bug ketika setelah membuka dan menutup (dengan mengklik pada elemen lain) popover untuk pertama kalinya, itu tidak terbuka lagi, sampai Anda membuat dua klik pada tautan memicu bukan satu.

Jadi saya memodifikasinya sedikit:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})
Anton Sergeyev
sumber
1
Bagus, itu bekerja untuk saya. BTW Anda lupa a); di akhir kode Anda setelah terakhir}
Merlin
1
Punya masalah yang sama terkait dengan klik kedua. Ini harus menjadi jawaban yang gagal!
Felipe Leão
Saya juga mencoba solusi sebelumnya di atas, tetapi sebagai panduan bagi mereka yang juga mencari solusi pada 2016, ini adalah solusi yang lebih baik.
dariru
jawaban teratas, berfungsi seperti yang diiklankan. seperti dicatat, yang lain tidak. ini harus menjadi jawaban teratas
duggi
Berfungsi sempurna kecuali saya tidak menggunakan data-toggel = "popover". Tetapi Anda dapat menentukan pemilih mana saja yang cocok dengan elemen pemicu popover Anda. Solusi yang bagus dan satu-satunya yang memecahkan masalah dua klik untuk saya.
shock_gone_wild
11

Saya membuat jsfiddle untuk menunjukkan kepada Anda bagaimana melakukannya:

http://jsfiddle.net/3yHTH/

Idenya adalah untuk menunjukkan popover ketika Anda mengklik tombol dan untuk menyembunyikan popover ketika Anda mengklik di luar tombol.

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});
Pigueiras
sumber
demo yang bagus. Saya bertanya-tanya bagaimana Anda bisa memanggil popover pada objek Jquery, popover adalah plugin bootstrap js, tetapi Anda tidak menyertakan file bootsap js di sana?
bingjie2680
Ada file js di jsfiddle. Lihatlah kolom kiri -> Kelola sumber daya.
Pigueiras
Ok, saya melihat ada bootstrap js. tetapi tidak dicentang, masih berfungsi?
bingjie2680
Ya itu berhasil. Lagi pula, saya mencari di google: jsfiddle bootstrapdan itu memberi saya kerangka bootstrap css + js di jsfiddle.
Pigueiras
2
Satu-satunya masalah saya dengan ini adalah bahwa Anda menyembunyikan popover ketika Anda mengkliknya. Mungkin juga hanya menggunakan tooltip.
NoBrainer
7

cukup tambahkan atribut ini dengan elemen

data-trigger="focus"
siraj k
sumber
Awalnya ini tidak bekerja untuk saya dengan Bootstrap 3.3.7 tetapi kemudian saya membaca dokumen dan mereka memiliki beberapa panduan yang layak disebutkan di sini. Dari contoh popover yang Ditolak dalam dokumen "Untuk perilaku lintas-browser dan lintas-platform yang tepat, Anda harus menggunakan tag <a>, bukan tag <button>, dan Anda juga harus menyertakan atribut role =" tombol "dan atribut tabindex . "
Jeff
3

Ini sudah ditanyakan sebelumnya di sini . Jawaban yang sama yang saya berikan kemudian masih berlaku:

Saya memiliki kebutuhan yang sama, dan menemukan ekstensi kecil yang bagus 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.

Miika L.
sumber
3

Ini terlambat ke pesta ... tapi saya pikir saya akan membagikannya. Saya suka popover tetapi memiliki sedikit fungsi bawaan. Saya menulis ekstensi bootstrap .bubble () itulah yang saya inginkan sebagai popover. Empat cara untuk memberhentikan. Klik di luar, aktifkan tautan, klik X, dan tekan escape.

Ini posisi secara otomatis sehingga tidak pernah keluar halaman.

https://github.com/Itumac/bootstrap-bubble

Ini bukan promo mandiri gratis ... Saya sudah sering mengambil kode orang lain dalam hidup saya, saya ingin menawarkan usaha saya sendiri. Berputar dan lihat apakah itu cocok untuk Anda.

Itumac
sumber
3

Menurut http://getbootstrap.com/javascript/#popovers ,

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

Gunakan pemicu fokus untuk mengabaikan popover pada klik berikutnya yang dibuat pengguna.

$('.popover-dismiss').popover({
    trigger: 'focus'
})
effe
sumber
2
Tidak berfungsi di browser Mac yang mengikuti perilaku asli OS X (yang tidak fokus atau mengaburkan tombol saat klik). Ini termasuk Firefox dan Safari. Orang-orang Bootstrap membuat kesalahan besar di sini, karena popover ini bahkan tidak bisa dibuka, apalagi diberhentikan.
Ante Vrli
2
@AnteVrli Mungkin ini belum ada di dokumentasi ketika Anda menulis komentar, tetapi sekarang dokumen mengatakan: "Untuk perilaku cross-browser dan cross-platform yang tepat, Anda harus menggunakan <a>tag, bukan <button>tag, dan Anda juga harus menyertakan role="button"dan tabindexatribut. " Apakah Anda mencobanya dengan spesifikasi ini?
Louis
3
Nah, ada adalah masalah dengan jawaban ini, yang tidak ada hubungannya dengan kompatibilitas platform: menekan tombol mouse di dalam popover akan memecat popover karena elemen yang memicu popover akan kehilangan fokus. Lupa memiliki pengguna yang dapat menyalin dan menempel dari popover: segera setelah tombol mouse turun, popover ditutup. Jika Anda memiliki item yang dapat ditindaklanjuti di popover (tombol, tautan), pengguna tidak akan dapat menggunakannya.
Louis
Begitu banyak untuk 'lintas platform' karena dalam bootstrap 4.0.0-beta dan 4.0.0-beta.2 Saya tidak bisa menjalankan ini pada Mac di Chrome :(
rmcsharry
3

Solusi yang diterima dimodifikasi. Apa yang saya alami adalah bahwa setelah beberapa popover disembunyikan, mereka harus diklik dua kali untuk muncul lagi. Inilah yang saya lakukan untuk memastikan popover ('hide') tidak dipanggil pada popover yang sudah tersembunyi.

$('body').on('click', function (e) {
    $('[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});
Chisom Daniel Mba
sumber
3

Solusi ini berfungsi dengan baik:

$("body")   .on('click'     ,'[data-toggle="popover"]', function(e) { 
    e.stopPropagation();
});

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

$("body")   .on('click'  , function(e) {
        $('[data-toggle="popover"]').popover('hide');
});
LN
sumber
2
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });
hienbt88
sumber
2

Anda juga dapat menggunakan acara bubbling untuk menghapus sembulan dari DOM. Agak kotor, tetapi berfungsi dengan baik.

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

Di html Anda, tambahkan kelas .popover-close ke konten di dalam popover yang seharusnya menutup popover.

Hendrik
sumber
2

Tampaknya metode 'sembunyikan' tidak berfungsi jika Anda membuat popover dengan delegasi pemilih, alih-alih 'hancurkan' harus digunakan.

Saya membuatnya bekerja seperti itu:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('destroy');
        }
    });
});

JSfiddle di sini

Vladimir Dimchev
sumber
2

Kami mengetahui bahwa kami memiliki masalah dengan solusi dari @mattdlockyer (terima kasih atas solusinya!). Saat menggunakan properti pemilih untuk konstruktor popover seperti ini ...

$(document.body').popover({selector: '[data-toggle=popover]'});

... solusi yang diusulkan untuk BS3 tidak akan berfungsi. Sebaliknya ia membuat contoh popover lokal untuk itu $(this). Inilah solusi kami untuk mencegah hal itu:

$(document.body).on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        }
    });
});

Sebagaimana disebutkan $(this).popover('hide');akan membuat contoh kedua karena pendengar yang didelegasikan. Solusi yang disediakan hanya menyembunyikan popover yang sudah diinstal.

Saya harap saya bisa menghemat waktu kalian.

inti
sumber
2

Bootstrap secara alami mendukung ini :

Demo JS Bin

Markup khusus diperlukan untuk mengabaikan klik berikutnya

Untuk lintas-browser yang tepat dan perilaku cross-platform, Anda harus menggunakan <a>tag, bukan yang<button> tag, dan Anda juga harus menyertakan role="button"dan tabindexatribut.

Tanner Perrien
sumber
Di bootstrap 4.0.0-beta dan 4.0.0-beta.2 Saya tidak bisa menjalankan ini di Mac di Chrome :(
rmcsharry
Mengklik di mana saja menutup popover ini, penanya membutuhkan "klik di luar popover menutupnya", yang berbeda.
philw
2

solusi ini menghilangkan klik 2 sial saat menampilkan popover untuk kedua kalinya

diuji dengan dengan Bootstrap v3.3.7

$('body').on('click', function (e) {
    $('.popover').each(function () {
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) {
            popover.inState.click = false;
            popover.hide();                
        }
    });
});
Nik
sumber
2

Saya sudah mencoba banyak jawaban sebelumnya, benar-benar tidak ada yang berhasil untuk saya tetapi solusi ini berhasil:

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

Mereka merekomendasikan untuk menggunakan jangkar tag bukan tombol dan merawat role = "button" + data-trigger = "focus" + tabindex = "0" atribut.

Ex:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>
Ahmed El Damasy
sumber
coba referensi ini juga: stackoverflow.com/questions/20466903/…
Ahmed El Damasy
1

Saya datang dengan ini: Skenario saya termasuk popover lebih banyak pada halaman yang sama, dan menyembunyikan mereka 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 'beralih' 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"
Adi Nistor
sumber
1

Saya hanya menghapus popover aktif lainnya sebelum popover baru ditampilkan (bootstrap 3):

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});              
andrearonsen
sumber
1

diuji dengan 3.3.6 dan klik kedua ok

        $('[data-toggle="popover"]').popover()
            .click(function () {
            $(this).popover('toggle');
        });;

        $(document).on('click', function (e) {
            $('[data-toggle="popover"]').each(function () {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });
Sungwook Ji
sumber
0

demo: http://jsfiddle.net/nessajtr/yxpM5/1/

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();

options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;

self.onClose = function () {
    $("#" + divId).html(options.loadingContent());
    $(selector).popover('hide')
    isVisible = clickedAway = false;
};
self.onCallback = function (result) {
    $("#" + divId).html(result);
};

$(selector).popover(options);

//events
$(selector).bind("click", function (e) {
    $(selector).filter(function (f) {
        return $(selector)[f] != e.target;
    }).popover('hide');

    $(selector).popover("show");
    callbackMethod(self.onCallback);

    isVisible = !(clickedAway = false);
});

$(document).bind("click", function (e) {
    if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
        self.onClose();
        isVisible = clickedAway = false;
    } else clickedAway = true;
});

}

ini solusi saya untuk itu.

Oğuzhan Topçu
sumber
0

Pendekatan ini memastikan bahwa Anda dapat menutup popover dengan mengklik di mana saja pada halaman. Jika Anda mengklik entitas yang dapat diklik lainnya, ia menyembunyikan semua popover lainnya. Animasi: false diperlukan jika tidak, Anda akan mendapatkan kesalahan .hapus di konsol Anda.

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')
Arijit Lahiri
sumber
0

Ok ini adalah upaya pertama saya untuk benar-benar menjawab sesuatu di stackoverflow jadi begini saja: P

Tampaknya tidak terlalu jelas bahwa fungsi ini sebenarnya bekerja di luar kotak pada bootstrap terbaru (well, jika Anda bersedia berkompromi di mana pengguna dapat mengklik. Saya tidak yakin apakah Anda harus meletakkan klik ' arahkan kursor per-se tetapi di iPad, klik berfungsi sebagai sakelar.

Hasil akhirnya adalah, pada desktop Anda dapat mengarahkan atau mengklik (sebagian besar pengguna akan mengarahkan). Pada perangkat sentuh, menyentuh elemen akan memunculkannya, dan menyentuhnya lagi akan menjatuhkannya. Tentu saja, ini adalah sedikit kompromi dari persyaratan awal Anda, tetapi setidaknya kode Anda sekarang lebih bersih :)

$ (". my-popover"). popover ({trigger: 'click hover'});

Ivan Portugal
sumber
0

Mengambil kode Matt Lockyer, saya telah melakukan reset sederhana sehingga dom tidak tercakup oleh elemen di hide.

Kode Matt: http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

Fiddle: http://jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});
pengguna14174
sumber
0

Coba ini, ini akan disembunyikan dengan mengklik di luar.

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
    $(this).popover('hide');
    }
    });
});
Rakesh Vadnal
sumber
0

Saya mengalami masalah dengan solusi mattdlockyer karena saya mengatur tautan popover secara dinamis menggunakan kode seperti ini:

$('body').popover({
        selector : '[rel="popover"]'
});

Jadi saya harus memodifikasinya seperti itu. Itu memperbaiki banyak masalah bagi saya:

$('html').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('destroy');
    }
  });
});

Ingat bahwa menghancurkan menghilangkan elemen, sehingga bagian pemilih penting untuk menginisialisasi popover.

bryanjj
sumber