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

animation	boolean Valeur par défaut : true	data-animation	Appliquez un effet de transition de fondu CSS à la fenêtre contextuelle.
html	boolean Valeur par défaut : false	data-html	Insérez du HTML dans la boîte contextuelle. Si faux, la méthode text de jQuery sera utilisée pour insérer du contenu dans le dom. Si vous êtes préoccupé par les attaques XSS, utilisez du texte.
placement	chaîne|fonction Valeur par défaut : top	data-placement	spécifie comment positionner la boîte contextuelle (c'est-à-dire haut|bas|gauche|droite|auto). Lorsqu'elle est spécifiée comme auto, la boîte contextuelle sera ajustée dynamiquement. Par exemple, si le placement est "auto left", le popup s'affichera à gauche si possible, et ne s'affichera à droite que si la situation ne le permet pas.
selector	string Valeur par défaut : false	data-selector	Si un sélecteur est fourni, l'objet popup sera délégué à la cible spécifiée.
titre	fonction chaîne |Valeur par défaut : ''	data-title	Si l'attribut title n'est pas spécifié, l'option title est la valeur de titre par défaut.
trigger	string Valeur par défaut : 'hover focus'	data-trigger	Définissez comment déclencher le popup : cliquez sur | hover focus manual. Vous pouvez transmettre plusieurs déclencheurs, chacun séparé par un espace.
retard	numéro objet 默认值：0	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使用教程》

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!