Plug-in pop-up Bootstrap memberikan tampilan yang diperluas. Plug-in pop-up menghasilkan konten dan tag sesuai dengan persyaratan. Secara default, pop-up ditempatkan di belakang elemen pemicu mereka.
Popover mirip dengan tooltip, memberikan tampilan yang diperluas. Untuk mengaktifkan kotak pop-up, pengguna hanya perlu melayang di atas elemen. Isi kotak pop-up dapat sepenuhnya diisi menggunakan data Bootstrap API (Bootstrap Data API). Metode ini bergantung pada tooltips.
Jika Anda ingin merujuk fungsionalitas plugin secara terpisah, maka Anda perlu referensi Popover.js, yang bergantung pada plugin Tooltip. Atau, sebagaimana disebutkan dalam bab ikhtisar plugin Bootstrap, Anda dapat merujuk ke bootstrap.js atau versi terkompresi bootstrap.min.js.
1. Penggunaan
Plugin Popover menghasilkan konten dan tag berdasarkan kebutuhan. Secara default, popover ditempatkan di belakang elemen pemicu mereka. Anda dapat menambahkan popover dengan dua cara:
Lewati properti data: Untuk menambahkan popover, cukup tambahkan data-kilat = "Popover" ke label jangkar/tombol. Judul jangkar adalah teks Popover. Secara default, plugin mengatur popover di bagian atas.
<a href = "#" data-koggle = "popover"> Mohon kurangi </a>
Melalui JavaScript: Aktifkan Popover melalui JavaScript:
$ ('#Identifier'). Popover (opsi)
Plugin Popover tidak seperti menu drop-down dan plug-in lainnya yang dibahas sebelumnya, ini bukan plug-in CSS murni. Untuk menggunakan plugin, Anda harus mengaktifkannya menggunakan jQuery (baca JavaScript). Gunakan skrip berikut untuk mengaktifkan semua popover di halaman:
$ (function () {$ ("[Data-koggle = 'Popover']"). Popover ();});
2. Contoh
Kotak pop-up adalah mengklik elemen untuk memunculkan wadah yang berisi judul dan konten.
// Penggunaan Dasar <type type = "tombol" data-koggle = "Popover" Data-Content = "Ini adalah plugin kotak popup"> Klik untuk pop up/sembunyikan kotak popup </button> // javascript menginisialisasi $ ('tombol'). Popover ();Plug-in pop-up memiliki banyak properti untuk mengonfigurasi tampilan prompt, sebagai berikut:
$ ('tombol'). Popover ({container: 'body', viewport: {selector: '#view', padding: 10,}});Ada empat metode untuk dieksekusi melalui JavaScript.
// tunjukkan $ ('tombol'). Popover ('show'); // Sembunyikan $ ('tombol'). Popover ('hide'); // terbalik menunjukkan dan sembunyikan $ ('tombol'). Popover ('sakelar'); // Sembunyikan dan hancurkan $ ('Tombol'). Popover ('Destroy');Ada empat jenis acara di plugin Popover:
// peristiwa, lainnya yang mirip dengan $ ('tombol'). On ('show.bs.tab', function () {alert ('gratis saat memanggil metode show!');});Di atas adalah semua tentang artikel ini. Saya harap akan sangat membantu bagi semua orang untuk mempelajari plugin pop-up Bootstrap.