Tambahkan overlay kecil ke konten halaman, seperti efek pada iPad, menambahkan informasi tambahan ke elemen halaman.
Dependensi plugin
Kotak pop-up tergantung pada plugin Tooltip, sehingga plugin Tooltip harus dimuat terlebih dahulu.
Fungsi penambahan selektif
Untuk pertimbangan kinerja, API atribut data dari tooltips dan komponen pop-up ditambahkan secara opsional, yang berarti Anda harus menginisialisasi mereka sendiri.
Pengaturan tambahan diperlukan saat kotak pop-up digunakan dalam grup tombol dan grup kotak input
Ketika kotak prompt digunakan bersama dengan kelompok .btn-group atau .input-group, Anda perlu menentukan wadah: opsi 'body' (lihat dokumentasi di bawah) untuk menghindari efek samping yang tidak diinginkan (misalnya, ketika kotak pop-up muncul, halaman elemen yang bekerja sama dengannya mungkin menjadi lebih luas atau de-rounded).
Saat menggunakan kotak pop-up pada elemen halaman terlarang, Anda perlu menambahkan elemen tambahan untuk menyelesaikannya
Untuk menambahkan kotak popup ke elemen yang dinonaktifkan atau.
1. Kasus statis
4 Opsi Opsional: Pengaturan atas, kanan, bawah, dan kiri.
Segmen kode
.bs-example {border-color: #dd; Border-Radius: 4px 4px 0 0; Perbatasan-lebar: 1px; Kotak-Shadow: Tidak Ada; margin-kiri: 0; margin-kanan: 0; Gaya perbatasan: solid; } .bs-example-popover .popover {position: relatif; Tampilan: Blok; float: kiri; Lebar: 240px; margin: 20px; }<h1> 3. Kotak Popup </h1> <div> <div> <biv> </div> <h3> Popover Top </h3> <div> <p> Sed posuere consectetur est di lobortis. Aenean Eu Leo Quam. Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> <div> <viv> </div> <h3> Popover kanan </h3> <viv> <p> Sed posuere consectetur est di lobortis. Aenean Eu Leo Quam. Pellentesque Ornare sem lacinia quam venenatis. </p> </div> <viv> <viv> </div> <h3> Popover kanan </h3> <v> <p> Sed posuere consectetur est di lobortis. Aenean Eu Leo Quam. Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> <viv> <viv> </div> <h3> Popover bottom </h3> <div> <p> Sed posuere consectetur est di lobortis. Aenean Eu Leo Quam. Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> <viv> <viv> </div> <h3> Popover kiri </h3> <div> <p> Sed posuere consectetur est at lobortis. Aenean Eu Leo Quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> </div> </div> </div>
Efek pratinjau
Cuplikan kode:
<a href = "JavaScript: void (0)" id = "a_pop"-placement = "Bawah" Data-Content = "The Wind and Rain seperti menghabiskan waktu untuk mengejar kuda putih. Anda masih memegang mimpi di telapak tangan Anda, bahkan jika kita mengatakan bahwa kita tidak akan terpisah, kita tidak ada yang diuapkan oleh musim panas yang diuapkan oleh tahun-tahun ini. Kami menyimpang dari seluruh dunia, angin dan mencerahkan kepingan salju meniup rambut kami. Anda pernah mengatakan bahwa Anda tidak boleh berpisah dan bersama selamanya, dan sekarang saya ingin bertanya apakah Anda hanya pepatah kekanak -kanakan, tahun -tahun yang tidak bersalah tidak tahan untuk menipu kaum muda. Aku akan hidup padamu. Salju tebal tolong jangan hapus jejak kita bersama. Salju tebal tidak bisa menghapus tanda yang kita berikan satu sama lain. Malam ini, rumput dipisahkan dan Malam Bulan yang cerah akan mengirimi Anda ribuan mil untuk menunggu angin musim gugur akan datang. "Data-original-title =" Time to Boil Rain "> Klik untuk memuat </a>
<strong> inisialisasi JS: </strong> <type skrip = "text/javascript"> $ ("#a_pop"). Popover (); </script>Efek pratinjau:
Perhatikan bahwa ketika penempatan ditentukan, beri perhatian khusus pada masalah arah. Karena kotak pop-up mulai bermunculan dengan pusat elemen acara pemicu, kemungkinan akan ditimpa dan tidak dapat ditampilkan semuanya.
Atribut tag HREF dalam kode harus ditentukan sebagai JavaScript: void (0) untuk menghapus efek tautan.
Empat Arah:
Kode
<a href = "JavaScript: void (0)" id = "a_pop1"-placement = "kiri" Data-content = "The Wind and Rain seperti menghabiskan waktu untuk mengejar ketinggalan dengan kuda putih. Apakah Anda masih memegang tidur Anda di telapak tangan Anda? > Kiri </a> <a href = "JavaScript: void (0)" id = "a_pop2" penempatan data = "atas" Data-content = "Kami mengatakan kami tidak boleh terpisah dan kami harus selalu bersama, bahkan jika kami adalah musuh dengan waktu, bahkan jika kami akan pergi dari dunia, angin dan angin salju meniup rambut putih. Data-original-title = "Time to Boil Rain"> Atas </a> <a href = "JavaScript: void (0)" id = "a_pop3"-placement = "dasar" Konten-data = "yang tidak ada pada Anda. kata-kata." Data-original-title = "Time to Boil Rain"> lebih rendah </a> <a href = "javascript: void (0)" id = "a_pop4"-placement = "kanan" Konten-Konten = "Tahun-tahun yang tidak bersalah yang tidak dapat ditanggung oleh orang-orang yang tidak dapat ditanggung. Lainnya. $ ("#a_pop2"). Popover (); $ ("#a_pop3"). Popover (); $ ("#a_pop4"). Popover (); </script>Efek pratinjau;
2. Opsi
Opsi dapat dilewati melalui properti data atau JavaScript. Untuk atribut data, Anda perlu meletakkan nama opsi setelah data-, misalnya data-animasi = "".
Terapkan properti data ke kotak pop-up tunggal
Untuk satu kotak sembulan, Anda dapat menentukan opsi secara terpisah melalui properti data, seperti yang ditunjukkan di atas.
3. Metode
$ (). Popover (opsi)
Menginisialisasi kotak pop-up untuk satu set elemen.
.popover ('show')
Menampilkan kotak pop-up.
$ ('#elemen'). Popover ('show')
.popover ('hide')
Sembunyikan kotak pop-up.
$ ('#elemen'). Popover ('hide')
.popover ('sakelar')
Tunjukkan atau sembunyikan kotak pop-up.
$ ('#elemen'). Popover ('sakelar')
.popover ('hancurkan')
Sembunyikan dan hancurkan kotak pop-up.
$ ('#elemen'). Popover ('Destroy')
Iv. Acara
$ ('#mypopover'). on ('hidden.bs.popover', function () {// lakukan sesuatu ...})Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini. Saya harap akan sangat membantu bagi semua orang untuk belajar dan menguasai kotak pop-up bootstrap.