ブートストラップでフローティングウィンドウを設定する方法

ブートストラップでフローティング ウィンドウを設定する方法: 1. HTML コードを作成します; 2. ハイパーリンクを定義し、対応するページの CSS と JS を導入します; 3. ブートストラップのポップオーバー プラグインを使用してフローティング ウィンドウを実現します窓効果。

この記事の動作環境: Windows 7 システム、ブートラップ バージョン 3.3.7、DELL G3 コンピューター

設定方法ブートストラップでフローティング ウィンドウを作成しますか?

BootStrap を使用してフローティング ウィンドウの効果を実現します

ソーシャル ネットワーキング サイトをよくプレイする人は、このようなことをよく知っているはずです。図に示すシナリオ:

ハイパーリンク上にマウスを置くと、アカウントに関する情報を含むフローティング ボックスが表示されます。

私はたまたま最近、同様のニーズに関連するフロントエンドの仕事をいくつか行っていました。 ——マウスを重ねるとフローティングボックスが表示され、そのフローティングボックスに具体的な情報が記載されます。実は以前ネットの記事を参考にしたのですが、ちょっと難しすぎるかなと思いました。 。そして、魔法のブートストラップにはこの機能が付属していることがわかりました。

そこで、bootstrap のポップオーバー プラグインを使用しました。その効果は非常に良好でした。非常に簡単ですが、記念に…

ハイパーリンクを定義し、対応するページに必要な css と js を導入する必要があることにも注意してください。

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" がキーで、ハイパーリンクがホバーされるとポップアップ ウィンドウがトリガーされます。 。

ブートストラップのポップオーバー プラグインに関するいくつかの共通プロパティは次のとおりです。

オプション名 タイプ/デフォルト値 データ プロパティ名 説明

#selectorstringdata-selector指定された場合セレクターが指定されている場合、ポップアップ オブジェクトは指定されたターゲットに委任されます。 タイトル文字列 | 関数#triggerstringdata-triggerポップアップ ボックスをトリガーする方法を定義します: 遅延数値 | オブジェクト

animation	boolean デフォルト値: true	data-animation	ポップするにはこのボックスは CSS フェード トランジション効果を適用します。
#html	boolean デフォルト値: false	data-html	To HTMLを挿入するためのポップアップボックス。 false の場合、jQuery の text メソッドを使用してコンテンツを dom に挿入します。 XSS 攻撃が心配な場合は、テキストを使用してください。
配置	文字列|関数 デフォルト値: top	data-placement	ポップアップ ボックスの配置方法 (つまり、top|bottom|left|right|auto) を指定します。 auto として指定すると、ポップアップ ボックスが動的に調整されます。たとえば、配置が「自動左」の場合、ポップアップは可能な場合は左側に表示され、状況によっては許可されない場合は右側に表示されます。
	デフォルト値: false
	デフォルト値: ''	data-title	title 属性が指定されていない場合、タイトル オプションがデフォルトのタイトル値になります。
	デフォルト値: 'hover focus'		クリック | ホバー | フォーカス | 手動 。複数のトリガーをスペースで区切って渡すことができます。
	默认值：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使用教程》

以上がブートストラップでフローティングウィンドウを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。