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:
<.>

<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:

delay:{ show:500, hide:100}

常见方法：

方法描述实例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!