Comment configurer une fenêtre flottante dans bootstrap

Comment configurer une fenêtre flottante dans bootstrap : 1. Créez du code Html ; 2. Définissez un lien hypertexte et introduisez le css et le js de la page correspondante ; 3. Utilisez le plug-in popover de bootstrap pour obtenir l'effet de fenêtre flottante.

L'environnement d'exploitation de cet article : système Windows 7, bootsrap version 3.3.7, ordinateur DELL G3

Comment configurer une fenêtre flottante avec bootstrap ?

Utilisez BootStrap pour obtenir l'effet de une fenêtre flottante

Je joue souvent sur les sites de réseaux sociaux. Un tel scénario doit être très courant, comme le montre l'image :

Passez la souris sur un lien hypertexte, puis une boîte flottante apparaîtra contenant des informations sur le compte.

Il se trouve que je faisais récemment des trucs front-end, impliquant des besoins similaires. ——Passez la souris et une boîte flottante apparaîtra. La boîte flottante décrit certaines informations spécifiques. En fait, j'ai déjà fait référence à un article sur Internet, mais je pensais que c'était un peu trop compliqué. . Et trouvé : le bootstrap magique est livré avec cette fonction.

J'ai donc utilisé le plug-in popover de bootstrap, et l'effet était plutôt bon. Même si c'est assez simple, rappelons-le...

Définissez un lien hypertexte, et notez qu'il faut introduire les css et js nécessaires à la page correspondante :

Code HTML

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

data-toggle="popover"属性则为该超链接绑定弹窗效果，data-placement="bottom"指定弹窗相对于超链接显示的位置，data-trigger="hover" c'est la clé, c'est déclenché lorsqu'il est spécifié qu'il est suspendu. Une fenêtre contextuelle apparaît. .

Certaines propriétés courantes du plugin popover de bootstrap sont les suivantes :

Nom de l'option Type/Valeur par défaut Données Nom de la propriété Description

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使用教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!