この記事では、主にJavaScriptプラグインポップアップボックスを学びます。
場合
iPadの効果と同じように、ページコンテンツに小さなオーバーレイを追加し、ページ要素に追加の情報を追加します。
いくつかの簡単な静的ケースレンダリングを見てみましょう
効果は比較的単純で、主に静的にポップアップし、フォームタイトルとフォームコンテンツに分割される小さなフォームです。
<div> <div> <div> </div> <h3>ポップオーバートップ</h3> <div> <p> sed posuere conectetur est at lobortis。 Aenean Eu Leo Quam。 Pellentessque ornare sem lacinia quam venenatis vestibulum。 Aenean Eu Leo Quam。 Pellentessque Ornare Sem Lacinia Quam venenatis。 Aenean Eu Leo Quam。 Pellentessque Ornare Sem Lacinia Quam Venenatis Vestibulum。 Aenean Eu Leo Quam。 Pellentessque Ornare Sem Lacinia Quam Venenatis Vestibulum。 Aenean Eu Leo Quam。 Pellentessque Ornare Sem Lacinia Quam venenatis。 Aenean Eu Leo Quam。 Pellentesque Ornare Sem Lacinia Quam Venenatis Vestibulum。</p> </div> </div> <div> </div>
しかし、要素の単純な基本レイアウトを設定する必要があります
<style type = "text/css">。bs-example-popover .popover {position：relative;表示：ブロック;フロート：左;幅：240px;マージン：20px;} </style>動的デモ
最初にレンダリングを見てみましょう
ボタンをクリックすると、ボタンがポップアップします。
実際、コードを読むのは非常に簡単です。
[code] <a id = "a2" data-clacement = "right" data-content = "は、つまり、短い、脂肪、貧弱、ugい、ugい、愚か、オナニーなどの属性特性を持つさまざまな衝撃的な行動やアイデアを表すために、シルク（または「スリングシルク」を書く」と言われている「スラー」の「スラー」と言われています。主に、農村部や多くの都市部の底部レベルの小世帯、多くの中学校が停止している貧しい家族のほとんどを参照し、都市に行って、レストランのウェイター、またはインターネットのインターネット管理者になり、都市の豊富なヴァグランスを拒否しました。 href = "＃" data-original-title = "シルクオリジナルの意味">クリックしてポップオーバーを切り替えてください</a> [code]
これは単なるラベルですが、ボタンのスタイルクラスを提供し、主にポップアップボックスを表示するために使用されるいくつかの属性を提供します。
最初のもの：データオリジナルタイトル - タイトル
2番目：データコンテンツコンテンツ
3番目：データプレースメントポジション（上、下、左、右）
ただし、実行した場合、ボタンにはボタンがあり、ボタンをクリックするとポップアップボックスが表示されません。それは非常に単純であることが判明しました。つまり、前のセクションのツールチップのように、まだ初期化されていません。
簡単なJavaScriptコードを追加するだけです。
<script type = "text/javascript"> $（ "＃a1"）。popover（）; </script>
4つの方向
<div style = "マージン左：200px;マージントップ：100px;マージンボトム：200px;"> <div> <ボタンタイプ= "button" data-container = "body" data-toggle = "Popover" data-lacement = "left" data-content = "vivamus sagittis lacus vel aukus box bullucus"> faucibus。 type = "button" data-container = "body" data-toggle = "popover" data-clacement = "data-content =" vivamus sagittis lacus vel augue laoreet rutrum faucibus data-content = "Vivamus sagittis lacus vel augue laoreet rutrum faucibus box </button> </div> </div>
次に、JavaScriptを使用してアクティブにします
<script type = "text/javascript"> $（ "＃a1"）。popover（）; $（ "[data-toggle = popover]"）。popover（）; </script>
選択的添加関数
パフォーマンスに関する考慮事項のために、ツールチップとポップアップコンポーネントのデータ属性APIがオプションで追加されます。つまり、自分で初期化する必要があります。
ボタングループと入力ボックスグループでポップアップボックスを使用する場合、追加の設定が必要です
プロンプトボックスが.btn-groupまたは.input-groupと組み合わせて使用される場合、コンテナを指定する必要があります：「ボディ」オプション（下のドキュメントを参照）は、不要な副作用を避けます（たとえば、ポップアップボックスが表示されると、協力するページ要素が幅が広くなっているか、ラウンダウンが描かれている場合があります）。
禁止されているページ要素でポップアップボックスを使用する場合、それをラップアップするために追加の要素を追加する必要があります
ポップアップボックスを無効または障害のある要素に追加するには、<div>のポップアップボックスに追加する必要があるページ要素を包み、この<div>要素にポップアップボックスを適用します。
使用法
JavaScript経由でポップアップボックスを有効にします：
$（ '＃example'）。ポップオーバー（オプション）
オプション
オプションは、データプロパティまたはJavaScriptを渡すことができます。データ属性の場合、data-animation = ""など、データの後にオプション名を配置する必要があります。
方法
$（）。ポップオーバー（オプション）
一連の要素のポップアップボックスを初期化します。
$（ '＃要素'）。ポップオーバー（ 'show'）
ポップアップボックスを表示します。
$（ '＃要素'）。ポップオーバー（ '非表示'）
ポップアップボックスを非表示にします。
$（ '＃要素'）。ポップオーバー（ 'トグル'）
ポップアップボックスを表示または非表示にします。
$（ '＃要素'）。ポップオーバー（ 'Destroy'）
ポップアップボックスを非表示にして破壊します。
イベント
$（ '[data-toggle = popover]'）。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。