ホームページ ウェブフロントエンド jsチュートリアル BootStrap のポップアップ ボックス (Popover) は、ポップアップ レイヤー上でのマウスの移動をサポートしています。 ポップアップ ウィンドウ レイヤーが非表示にならない理由と解決策。

BootStrap のポップアップ ボックス (Popover) は、ポップアップ レイヤー上でのマウスの移動をサポートしています。 ポップアップ ウィンドウ レイヤーが非表示にならない理由と解決策。

May 16, 2016 pm 03:06 PM

ポップオーバーはツールチップに似ており、拡張ビューを提供します。ポップオーバーをアクティブにするには、ユーザーは要素の上にマウスを移動するだけです。ポップアップ ボックスの内容はすべて、Bootstrap Data API を使用して入力できます。この方法はツールチップに依存します。

1 遅延を設定します。遅延後にポップアップ ウィンドウが移動しない場合、ポップアップ ウィンドウは非表示になります。 >

2 制御できません Tooltip.prototype.enter = function (obj) { > の
Tooltip.prototype.init = function{中的
var triggers = this.options.trigger.split(' ')后面加上
//设置延时
if (this.options.trigger.indexOf('hover') > -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
}
ログイン後にコピー
clearTimeout(self.timeout) の後に、消えたコード

が追加されます

以下はポップアップボックス (Popover) の使い方の補足です

ポップアップボックス (Popover) プラグインはコンテンツを生成しますデフォルトでは、ポップオーバーはトリガー要素の後ろに配置されます。ポップオーバーは 2 つの方法で追加できます:
if (self.options.trigger.indexOf('hover') > -1) {
self.$tip.unbind('mouseenter').bind('mouseenter', function (e) {
self.$tip.data('data-element', self.$element);//触发popover框的点击事件时可以获取id
clearTimeout(self.timeout);
self.hoverState = 'in';
}).unbind('mouseleave').bind('mouseleave', function (e) {
self.hoverState = 'out';
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
})
}
ログイン後にコピー

data 属性経由: ポップオーバーを追加するには、アンカー/ボタン タグに data-toggle= を追加するだけです。単に「ポップオーバー」です。アンカーのタイトルはポップオーバーのテキストです。デフォルトでは、プラグインはポップオーバーを上部に配置します。

JavaScript 経由: JavaScript 経由でポップオーバーを有効にする:


ポップオーバー プラグインは、前に説明したドロップダウン メニューとは異なります。他のプラグインと同様、純粋な CSS プラグインではありません。プラグインを使用するには、jquery (JavaScript を読み取る) を使用してプラグインを有効にする必要があります。次のスクリプトを使用して、ページ上のすべてのポップオーバーを有効にします:

<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>
ログイン後にコピー
上記はこの記事の全内容です。その他の関連チュートリアルについては、

ブートストラップ ビデオ チュートリアルをご覧ください。

!
$('#identifier').popover(options)
ログイン後にコピー

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

例JSONファイルの例

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

独自のAjax Webアプリケーションを構築します

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

8見事なjQueryページレイアウトプラグイン

' this' JavaScriptで? ' this' JavaScriptで? Mar 04, 2025 am 01:15 AM

' this' JavaScriptで?

ソースビューアーでjQueryの知識を向上させます ソースビューアーでjQueryの知識を向上させます Mar 05, 2025 am 12:54 AM

ソースビューアーでjQueryの知識を向上させます

モバイル開発用のモバイルチートシート10個 モバイル開発用のモバイルチートシート10個 Mar 05, 2025 am 12:43 AM

モバイル開発用のモバイルチートシート10個

See all articles