So richten Sie ein schwebendes Fenster im Bootstrap ein

So richten Sie ein schwebendes Fenster in Bootstrap ein: 1. Erstellen Sie einen HTML-Code. 2. Definieren Sie einen Hyperlink und führen Sie das CSS und JS der entsprechenden Seite ein. 3. Verwenden Sie das Popover-Plug-In von Bootstrap, um den schwebenden Fenstereffekt zu erzielen.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootsrap-Version 3.3.7, DELL G3-Computer

Wie richte ich ein schwebendes Fenster mit Bootstrap ein?

Verwenden Sie BootStrap, um den Effekt zu erzielen ein schwebendes Fenster

Ich spiele oft Social-Networking-Sites. Ein solches Szenario muss sehr häufig vorkommen, wie im Bild gezeigt:

Platzieren Sie die Maus auf einem Hyperlink, und dann erscheint ein schwebendes Feld mit einigen Informationen über das Konto.

Ich habe kürzlich zufällig ein paar Front-End-Sachen gemacht, bei denen es um ähnliche Anforderungen ging. ——Bewegen Sie die Maus und ein schwebendes Feld wird angezeigt. Das schwebende Feld beschreibt einige spezifische Informationen. Ich habe tatsächlich schon einmal auf einen Artikel im Internet verwiesen, fand ihn aber etwas zu kompliziert. . Und gefunden: Der magische Bootstrap bringt diese Funktion mit.

Also habe ich das Popover-Plugin von Bootstrap verwendet und der Effekt war ziemlich gut. Obwohl es ganz einfach ist, erinnern wir uns daran ...

Definieren Sie einen Hyperlink und beachten Sie, dass das erforderliche CSS und JS für die entsprechende Seite eingeführt werden muss:

HTML-Code

<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" ist der Schlüssel, es wird ausgelöst, wenn angegeben wird, dass es angehalten werden soll. Ein Popup-Fenster wird angezeigt. .

Einige allgemeine Eigenschaften des Bootstrap-Popover-Plugins sind wie folgt:

Optionsname Typ/Standardwert Dateneigenschaftsname Beschreibung

VerzögerungNummernobjekt

animation	boolean Standardwert: true	data-animation	Wenden Sie einen CSS-Fade-Übergangseffekt auf das Popup an.
html	boolean Standardwert: false	data-html	HTML in das Popup-Feld einfügen. Bei „false“ wird die Textmethode von jQuery verwendet, um Inhalte in den Dom einzufügen. Wenn Sie Angst vor XSS-Angriffen haben, verwenden Sie Text.
Platzierung	Zeichenfolge|Funktion Standardwert: top	data-placement	gibt an, wie das Popup-Feld positioniert werden soll (d. h. oben|unten|links|rechts|auto). Bei der Angabe auto wird das Popup-Fenster dynamisch angepasst. Wenn die Platzierung beispielsweise auf „Auto-Links“ steht, wird das Popup nach Möglichkeit links angezeigt und nur dann rechts, wenn die Situation dies nicht zulässt.
selector	string Standardwert: false	data-selector	Wenn ein Selektor bereitgestellt wird, wird das Popup-Objekt an das angegebene Ziel delegiert.
Titel	String-Funktion Standardwert: ''	data-title	Wenn das Attribut title nicht angegeben ist, ist die Titeloption der Standardtitelwert.
trigger	string Standardwert: 'hover focus'	data-trigger	Definieren Sie, wie das Popup ausgelöst werden soll: click |. focus |. Sie können mehrere Trigger übergeben, die jeweils durch ein Leerzeichen getrennt sind.
	默认值：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使用教程》

Das obige ist der detaillierte Inhalt vonSo richten Sie ein schwebendes Fenster im Bootstrap ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!