Bagaimana untuk menyediakan tetingkap terapung dalam bootstrap

Cara untuk menyediakan tetingkap terapung dalam bootstrap: 1. Cipta kod Html; kesan tingkap.

Persekitaran pengendalian artikel ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

Cara untuk menetapkan ke atas tetingkap terapung dalam bootstrap?

Gunakan BootStrap untuk mencapai kesan tetingkap terapung

Mereka yang kerap bermain laman rangkaian sosial mesti biasa dengan senario, seperti yang ditunjukkan dalam gambar:

Tuding tetikus pada hiperpautan, dan kemudian kotak terapung akan muncul yang mengandungi beberapa maklumat tentang akaun.

Saya kebetulan melakukan beberapa perkara hadapan baru-baru ini, yang melibatkan keperluan yang serupa. ——Tuding tetikus dan kotak terapung akan muncul Kotak terapung menerangkan beberapa maklumat tertentu. Saya sebenarnya merujuk kepada artikel di Internet sebelum ini, tetapi saya fikir ia agak rumit. . Dan didapati: bootstrap ajaib datang dengan fungsi ini.

Jadi saya menggunakan pemalam popover bootstrap, dan kesannya cukup bagus. Walaupun ia agak mudah, mari kita memperingatinya...

Tentukan hiperpautan Pada masa yang sama, sila ambil perhatian bahawa css dan js yang diperlukan untuk halaman yang sepadan mesti diperkenalkan:
<.>

Kod Html Atribut

<link href="css/bootstrap.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<a href="#" class="bind_hover_card" data-toggle="popover" data-placement="bottom" data-trigger="hover"><img class="commentAvatarImage" src="img/social_dribbble.png" /></a>

mengikat kesan tetingkap timbul pada hiperpautan data-toggle="popover" menentukan kedudukan tetingkap timbul berbanding paparan hiperpautan. data-placement="bottom" ialah kuncinya. Ia menyatakan bahawa tetingkap timbul akan dicetuskan apabila melayang paparan. . data-trigger="hover"

Beberapa sifat biasa tentang pemalam popover bootstrap adalah seperti berikut:

Jenis Nama Pilihan/Nilai Lalai Perihalan Nama Harta Data

kelewatannombor |默认值：0

animasi	boolean Nilai lalai: benar	animasi data	popup kotak menggunakan kesan peralihan pudar CSS.
html	boolean Nilai lalai: false	data-html	kotak timbul untuk memasukkan HTML. Jika palsu, kaedah teks jQuery akan digunakan untuk memasukkan kandungan ke dalam dom. Jika anda bimbang tentang serangan XSS, gunakan teks.
peletakan	rentetan|fungsi Nilai lalai: atas	peletakan data	Menentukan cara meletakkan kotak pop timbul (iaitu atas|bawah|kiri|kanan|auto). Apabila dinyatakan sebagai auto, kotak pop timbul akan dilaraskan secara dinamik. Sebagai contoh, jika peletakan adalah "auto left", pop timbul akan dipaparkan di sebelah kiri jika boleh, dan hanya akan dipaparkan di sebelah kanan jika keadaan tidak membenarkannya.
pemilih	rentetan Nilai lalai: palsu	pemilih data	jika disediakan Jika pemilih ditentukan, objek pop timbul akan diwakilkan kepada sasaran yang ditentukan.
tajuk	fungsi rentetan Nilai lalai: ''	data-title	Jika atribut title tidak ditentukan, pilihan tajuk ialah nilai tajuk lalai.
pencetus	rentetan Nilai lalai: 'tuding fokus'	pencetus data	Tentukan cara untuk mencetuskan kotak pop timbul: klik |. Anda boleh lulus berbilang pencetus, setiap satu dipisahkan oleh ruang.
	data-delay	延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： delay:{ show:500, hide:100}
container	string | false 默认值：false	data-container	向指定元素追加弹出框。 实例： container: 'body'

常见方法：

方法描述实例Options: .popover(options)向元素集合附加弹出框句柄。

$().popover(options)
Toggle: .popover('toggle')切换显示/隐藏元素的弹出框。
$('#element').popover('toggle')
Show: .popover('show')显示元素的弹出框。
$('#element').popover('show')
Hide: .popover('hide')隐藏元素的弹出框。
$('#element').popover('hide')
Destroy: .popover('destroy')隐藏并销毁元素的弹出框。
$('#element').popover('destroy')

好了，下面重点是Js部分。

$(function() { 
  $("[data-toggle='popover']").popover({ 
    html : true,  
    title: title(),  
    delay:{show:500, hide:1000}, 
    content: function() { 
     return content();  
    }  
  }); 
});

而我们来模拟下动态加载悬浮框的标题和内容：

//模拟动态加载标题(真实情况可能会跟后台进行ajax交互) 
function title() { 
  return '田喜碧Hebe(节制的人生)'; 
} 
 
//模拟动态加载内容(真实情况可能会跟后台进行ajax交互) 
function content() { 
  var data = $("<form><ul><li><span aria-hidden=&#39;true&#39; class=&#39;icon_globe&#39;></span> <font>粉丝数:</font>7389223</li>" + 
       "<li><span aria-hidden=&#39;true&#39; class=&#39;icon_piechart&#39;></span> <font>关注:</font>265</li>" + 
       "<li><span aria-hidden=&#39;true&#39; class=&#39;icon_search_alt&#39;></span> <font>微博:</font>645</li>" + 
       "<li><span aria-hidden=&#39;true&#39; class=&#39;icon_pens_alt&#39;></span> <font>所在地:</font>台湾</li>" + 
       "<input id=&#39;btn&#39; type=&#39;button&#39; value=&#39;关注&#39; onclick=&#39;test()&#39;/></form>"); 
   
  return data; 
} 
//模拟悬浮框里面的按钮点击操作 
function test() { 
  alert(&#39;关注成功&#39;); 
}

查看效果：

推荐学习：《bootstrap使用教程》

Atas ialah kandungan terperinci Bagaimana untuk menyediakan tetingkap terapung dalam bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!