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 lazy"  src="/static/imghwm/default1.png"  data-src="img/social_dribbble.png"    / alt="How to set up a floating window in bootstrap" ></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

animation	boolean Default value: true	data-animation	To pop up The box applies a CSS fade transition effect.
#html	boolean Default value: false	data-html	To pop up box to insert HTML. If false, jQuery's text method will be used to insert content into the dom. If you are concerned about XSS attacks, use text.
placement	string|function Default value: top	data-placement	Specifies how to position the pop-up box (i.e. top|bottom|left|right|auto). When specified as auto, the pop-up box will be dynamically adjusted. For example, if placement is "auto left", the popup will be displayed on the left if possible, and it will be displayed on the right if the situation does not allow it.
selector	string Default value: false	data-selector	if provided If a selector is specified, the popup object will be delegated to the specified target.
title	string | function Default value: ''	data-title	If the title attribute is not specified, the title option is the default title value.
trigger	string Default value: 'hover focus'	data-trigger	Define how to trigger the pop-up box: click| hover | focus | manual. You can pass multiple triggers, each separated by a space.
delay	number | object 默认值：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使用教程》

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!