JS コンポーネント ブートストラップはポップアップ ボックス効果コードを実装します_javascript スキル

iPad のエフェクトと同様に、ページ コンテンツに小さなオーバーレイを追加し、ページ要素に追加情報を追加します。

プラグインの依存関係
ポップアップ ボックスはツールチップ プラグインに依存しているため、最初にツールチップ プラグインをロードする必要があります。
オプトイン機能
パフォーマンス上の理由から、ツールチップおよびポップアップ コンポーネントのデータ属性 API はオプションです。つまり、これらを自分で初期化する必要があります。
ボタングループや入力ボックスグループでポップアップボックスを使用する場合は追加設定が必要です
ポップアップを .btn-group または .input-group と組み合わせて使用​​する場合、望ましくない副作用 (ポップアップ表示後など) を避けるために、container: 'body' オプション (以下のドキュメントを参照) を指定する必要があります。 , 動作するページ要素の幅が広くなったり、角が丸くなったりする場合があります)。
禁止されたページ要素でポップアップ ボックスを使用する場合、それを囲む追加要素を追加する必要があります
無効または .disabled 要素にポップアップ ボックスを追加するには、ポップアップ ボックスを追加する必要があるページ要素を

で囲み、ポップアップ ボックスをこの

に適用します。要素。
1. 静的ケース
4 つのオプション オプション: 上、右、下、左の配置。

コードスニペット

.bs-example 
  { 
   border-color:#ddd; 
   border-radius:4px 4px 0 0; 
   border-width:1px; 
   box-shadow:none; 
   margin-left:0; 
   margin-right:0; 
   border-style:solid; 
  } 
 .bs-example-popover .popover { 
  position: relative; 
  display: block; 
  float: left; 
  width: 240px; 
  margin: 20px; 
} 

<h1 class="page-header">3、弹出框</h1> 
 <div class="bs-example bs-example-popover"> 
 <div class="popover top"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover top</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
 </div> 
 <div class="popover right"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover right</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 
  <div class="popover bottom"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover bottom</h3> 
 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 
  <div class="popover left"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover left</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 </div> 

プレビュー効果

コードスニペット:

<a href="javascript:void(0)" id="a_pop" class="btn btn-danger" data-placement="bottom" data-content=" 
 风吹雨成花 时间追不上白马 
你年少掌心的梦话 依然紧握着吗 
云翻涌成夏 眼泪被岁月蒸发 
这条路上的你我她 有谁迷路了吗 
 
我们说好不分离 要一直一直在一起 
就算与时间为敌 就算与全世界背离 
风吹亮雪花 吹白我们的头发 
当初说一起闯天下 你们还记得吗 
 
那一年盛夏 心愿许的无限大 
我们手拉手也成舟 划过悲伤河流 
 
你曾说过不分离 要一直一直在一起 
现在我想问问你 是否只是童言无忌 
 
天真岁月不忍欺 青春荒唐我不负你 
大雪求你别抹去 我们在一起的痕迹 
 
大雪也无法抹去 我们给彼此的印记 
今夕何夕 青草离离 
明月夜送君千里 等来年 秋风起" 
 data-original-title="时间煮雨" 
 >点击加载</a> 

<strong>js初始化：</strong> 
<script type="text/javascript"> 
 $("#a_pop").popover(); 
</script> 

プレビュー効果:

配置を指定する際は方向に特に注意してください。ポップアップ ボックスはイベントをトリガーする要素の中心からポップアップし始めるため、覆われて完全に表示できない可能性があります。

リンク効果を削除するには、コード内の a タグの href 属性を javascript:void(0) として指定する必要があります。

4 方向:

コード

<a href="javascript:void(0)" id="a_pop1" class="btn btn-danger" data-placement="left" data-content= 
 " 
 风吹雨成花 时间追不上白马 
 你年少掌心的梦话 依然紧握着吗 
 云翻涌成夏 眼泪被岁月蒸发 
 这条路上的你我她 有谁迷路了吗 
 " 
 data-original-title="时间煮雨" 
 >左侧</a> 
 <a href="javascript:void(0)" id="a_pop2" class="btn btn-danger" data-placement="top" data-content= 
 " 
我们说好不分离 要一直一直在一起 
就算与时间为敌 就算与全世界背离 
风吹亮雪花 吹白我们的头发 
当初说一起闯天下 你们还记得吗 
 " data-original-title="时间煮雨"> 
 上部 
 </a> 
 <a href="javascript:void(0)" id="a_pop3" class="btn btn-danger" data-placement="bottom" data-content= 
 " 
那一年盛夏 心愿许的无限大 
我们手拉手也成舟 划过悲伤河流 
你曾说过不分离 要一直一直在一起 
现在我想问问你 是否只是童言无忌 
 " data-original-title="时间煮雨"> 
 下部 
 </a> 
 <a href="javascript:void(0)" id="a_pop4" class="btn btn-danger" data-placement="right" data-content= 
 " 
 天真岁月不忍欺 青春荒唐我不负你 
大雪求你别抹去 我们在一起的痕迹 
大雪也无法抹去 我们给彼此的印记 
今夕何夕 青草离离 
明月夜送君千里 等来年 秋风起 
 " data-original-title="时间煮雨"> 
 右侧 
 </a> 
 </div> 
 <script type="text/javascript"> 
  $("#a_pop1").popover(); 
  $("#a_pop2").popover(); 
  $("#a_pop3").popover(); 
  $("#a_pop4").popover(); 
 </script> 

効果をプレビュー;

2. オプション
オプションはデータ属性または JavaScript を介して渡すことができます。 data 属性の場合は、data-animation="" のように、data- の後にオプション名を付ける必要があります。

単一のポップアップ ボックスにデータ属性を適用します
単一のポップアップ ボックスの場合、上に示したように、データ属性を通じてオプションを個別に指定できます。

3.方法
$().popover(オプション)

一連の要素のポップアップ ボックスを初期化します。

.popover('show')

ポップアップを表示します。

$('#element').popover('show')
.popover('hide')

ポップアップを非表示にします。

$('#element').popover('hide')
.popover('toggle')

ポップアップを表示または非表示にします。

$('#element').popover('toggle')
.popover('destroy')

ポップアップを非表示にして破棄します。

$('#element').popover('destroy')

4. イベント

$('#myPopover').on('hidden.bs.popover',
function
() {
//
 do something…})

上記がこの記事の全内容です。Bootstrap ポップアップ ボックスを学習し、習得するのに役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

1 か月前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7642

15

CakePHP チュートリアル

1392

52

Steamのアカウント名の形式は何ですか

90

11

Win11 Activation Key Permanent

72

19

NYTの接続はヒントと回答です

33

150

もっと見る