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

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

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!