How to set up a floating window in bootstrap

How to set up a floating window in bootstrap: 1. Create Html code; 2. Define a hyperlink and introduce the css and js of the corresponding page; 3. Use bootstrap's popover plug-in to achieve the floating window effect.

The operating environment of this article: Windows 7 system, bootsrap version 3.3.7, DELL G3 computer

How to set up a floating window in bootstrap?

Use BootStrap to achieve the effect of floating windows

People who often play social networking sites must be familiar with such a scenario, as shown in the picture:

Hover the mouse on a hyperlink, and then a floating box will appear containing some information about the account.

I just happened to be doing some front-end stuff recently, involving similar needs. ——Hover the mouse and a floating box will appear. The floating box describes some specific information. I actually referred to an article on the Internet before, but I thought it was a bit too complicated. . And found: the magical bootstrap comes with this function.

So I used bootstrap’s popover plug-in, and the effect was pretty good. Although it is quite simple, let’s commemorate it...

Define a hyperlink, and also note that the necessary css and js for the corresponding page must be introduced:

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"The attribute binds the pop-up window effect to the hyperlink, data-placement="bottom"Specifies the pop-up window relative to The position where the hyperlink is displayed, data-trigger="hover" is the key, and the pop-up window will be triggered when the hyperlink is hovered. .

Some common properties about bootstrap’s popover plug-in are as follows:

Option name Type/default value Data Property name 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使用教程》

The above is the detailed content of How to set up a floating window in bootstrap. For more information, please follow other related articles on the PHP Chinese website!