Komponen JS Bootstrap melaksanakan kemahiran kod_javascript kesan kotak pop timbul

Menambah tindanan kecil pada kandungan halaman, sama seperti kesan pada iPad, menambahkan maklumat tambahan pada elemen halaman.

Kebergantungan pemalam
Kotak pop timbul bergantung pada pemalam petua alat, jadi pemalam petua alat perlu dimuatkan terlebih dahulu.
Ciri ikut serta
Atas sebab prestasi, API atribut data bagi petua alat dan komponen pop timbul adalah pilihan, yang bermaksud anda mesti memulakannya sendiri.
Apabila kotak pop timbul digunakan dalam kumpulan butang dan kumpulan kotak input, tetapan tambahan diperlukan
Apabila pop timbul digunakan bersama .btn-group atau .input-group, anda perlu menentukan bekas: pilihan 'body' (lihat dokumentasi di bawah) untuk mengelakkan kesan sampingan yang tidak diingini (cth., selepas pop timbul dipaparkan , Elemen halaman yang berfungsi dengannya mungkin menjadi lebih luas atau mempunyai sudut bulat).
Apabila menggunakan kotak pop timbul pada elemen halaman yang dilarang, anda perlu menambah elemen tambahan untuk membalutnya
Untuk menambah kotak pop timbul pada elemen disabled atau .disabled, balut elemen halaman yang kotak pop timbul perlu ditambah dalam

, dan kemudian gunakan kotak pop timbul pada

unsur.
1. Kes statik
4 pilihan pilihan: susunan atas, kanan, bawah dan kiri.

Coretan kod

.bs-example 
  { 
   border-color:#ddd; 
   border-radius:4px 4px 0 0; 
   border-width:1px; 
   box-shadow:none; 
   margin-left:0; 
   margin-right:0; 
   border-style:solid; 
  } 
 .bs-example-popover .popover { 
  position: relative; 
  display: block; 
  float: left; 
  width: 240px; 
  margin: 20px; 
} 

<h1 class="page-header">3、弹出框</h1> 
 <div class="bs-example bs-example-popover"> 
 <div class="popover top"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover top</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
 </div> 
 <div class="popover right"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover right</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 
  <div class="popover bottom"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover bottom</h3> 
 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 
  <div class="popover left"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover left</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 </div> 

Kesan pratonton

Coretan kod:

<a href="javascript:void(0)" id="a_pop" class="btn btn-danger" data-placement="bottom" data-content=" 
 风吹雨成花 时间追不上白马 
你年少掌心的梦话 依然紧握着吗 
云翻涌成夏 眼泪被岁月蒸发 
这条路上的你我她 有谁迷路了吗 
 
我们说好不分离 要一直一直在一起 
就算与时间为敌 就算与全世界背离 
风吹亮雪花 吹白我们的头发 
当初说一起闯天下 你们还记得吗 
 
那一年盛夏 心愿许的无限大 
我们手拉手也成舟 划过悲伤河流 
 
你曾说过不分离 要一直一直在一起 
现在我想问问你 是否只是童言无忌 
 
天真岁月不忍欺 青春荒唐我不负你 
大雪求你别抹去 我们在一起的痕迹 
 
大雪也无法抹去 我们给彼此的印记 
今夕何夕 青草离离 
明月夜送君千里 等来年 秋风起" 
 data-original-title="时间煮雨" 
 >点击加载</a> 

<strong>js初始化：</strong> 
<script type="text/javascript"> 
 $("#a_pop").popover(); 
</script> 

Kesan pratonton:

Perhatikan bahawa apabila menyatakan peletakan, beri perhatian khusus kepada arah. Oleh kerana kotak pop timbul mula muncul dari tengah elemen yang mencetuskan acara, kotak itu mungkin dilindungi dan tidak dapat dipaparkan sepenuhnya.

Atribut href bagi teg a dalam kod mesti dinyatakan sebagai javascript:void(0) untuk mengalih keluar kesan pautan.

Empat arah:

Kod

<a href="javascript:void(0)" id="a_pop1" class="btn btn-danger" data-placement="left" data-content= 
 " 
 风吹雨成花 时间追不上白马 
 你年少掌心的梦话 依然紧握着吗 
 云翻涌成夏 眼泪被岁月蒸发 
 这条路上的你我她 有谁迷路了吗 
 " 
 data-original-title="时间煮雨" 
 >左侧</a> 
 <a href="javascript:void(0)" id="a_pop2" class="btn btn-danger" data-placement="top" data-content= 
 " 
我们说好不分离 要一直一直在一起 
就算与时间为敌 就算与全世界背离 
风吹亮雪花 吹白我们的头发 
当初说一起闯天下 你们还记得吗 
 " data-original-title="时间煮雨"> 
 上部 
 </a> 
 <a href="javascript:void(0)" id="a_pop3" class="btn btn-danger" data-placement="bottom" data-content= 
 " 
那一年盛夏 心愿许的无限大 
我们手拉手也成舟 划过悲伤河流 
你曾说过不分离 要一直一直在一起 
现在我想问问你 是否只是童言无忌 
 " data-original-title="时间煮雨"> 
 下部 
 </a> 
 <a href="javascript:void(0)" id="a_pop4" class="btn btn-danger" data-placement="right" data-content= 
 " 
 天真岁月不忍欺 青春荒唐我不负你 
大雪求你别抹去 我们在一起的痕迹 
大雪也无法抹去 我们给彼此的印记 
今夕何夕 青草离离 
明月夜送君千里 等来年 秋风起 
 " data-original-title="时间煮雨"> 
 右侧 
 </a> 
 </div> 
 <script type="text/javascript"> 
  $("#a_pop1").popover(); 
  $("#a_pop2").popover(); 
  $("#a_pop3").popover(); 
  $("#a_pop4").popover(); 
 </script> 

Kesan pratonton;

2
Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, anda perlu meletakkan nama pilihan selepas data-, seperti data-animation="".

Gunakan atribut data pada satu kotak pop timbul

Untuk kotak pop timbul tunggal, pilihan boleh ditentukan secara individu melalui atribut data, seperti yang ditunjukkan di atas.

3. Kaedah
$().popover(pilihan)

Mulakan kotak pop timbul untuk satu set elemen.

.popover('show')

Tunjukkan pop timbul.

$('#elemen').popover('show')
.popover('sorok')

Sembunyikan pop timbul.

$('#elemen').popover('sembunyi')
.popover('togol')

Tunjukkan atau sembunyikan pop timbul.

$('#elemen').popover('togol')
.popover('musnahkan')

Sembunyikan dan musnahkan pop timbul.

$('#elemen').popover('musnahkan')

4

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk mempelajari dan menguasai kotak timbul Bootstrap.

$('#myPopover').on('hidden.bs.popover',
function
() {
//
 do something…})

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

Assassin's Creed Shadows - Cara Mencari Orang Panda

1 bulan yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7615

15

Tutorial CakePHP

1387

52

Apakah format nama akaun stim

88

11

kunci pengaktifan win11 kekal

68

19

Sambungan NYT menunjukkan dan jawapan

29

136

Tunjukkan Lagi