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

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

PHPz
リリース: 2018-09-28 14:44:16
オリジナル
2642 人が閲覧しました

ポップオーバーはツールチップに似ており、拡張ビューを提供します。ポップオーバーをアクティブにするには、ユーザーは要素の上にマウスを移動するだけです。ポップアップ ボックスの内容はすべて、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>
ログイン後にコピー
上記はこの記事の全内容です。その他の関連チュートリアルについては、

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート