[解決済み] Bootstrapのポップオーバーの位置を、ウィンドウの端に対するポップオーバーのXの位置に基づいて変更する?
2023-05-31 21:07:04
質問
私はインターネットをくまなく調べ、このstackoverflowの投稿が洞察に満ちたものであることを知りました。 画面の幅に基づいて Bootstrap のポップオーバーの位置を変更することは可能ですか? を見つけましたが、それはまだ私の質問に答えておらず、おそらく私が位置/オフセットを理解するのに苦労したためです。
私がやろうとしていることは、以下のとおりです。ホットスポットのポップオーバーがビューポートを越えて配置されない限り、Twitter Bootstap ポップオーバーの位置を右側にしたいのですが、左側にしたいのです。ホットスポットを押すと情報が表示されますが、水平スクロールがロックされているときにビューポートの外側に表示されないようにしたいのです。
こんな感じかなと思っています。
$('.infopoint').popover({
trigger:'hover',
animation: false,
placement: wheretoplace
});
function wheretoplace(){
var myLeft = $(this).offset.left;
if (myLeft<500) return 'left';
return 'right';
}
感想は?ありがとうございます。
どのように解決するのですか?
今気づいたのですが 配置 オプションは 文字列 または 文字列を返す関数 を返す関数で、ポップオーバー可能なリンクをクリックするたびに計算されます。
これによって、最初の $.each 関数がなくても再現できます。
var options = {
placement: function (context, source) {
var position = $(source).position();
if (position.left > 515) {
return "left";
}
if (position.left < 515) {
return "right";
}
if (position.top < 110){
return "bottom";
}
return "top";
}
, trigger: "click"
};
$(".infopoint").popover(options);
関連
-
[解決済み] jquery - is not a function エラー
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] jQueryでチェックボックスの値を取得する
-
[解決済み] jQueryでPUT/DELETEリクエストを送信する方法は?
-
[解決済み] クリックボタンでクリップボードにコピー
-
[解決済み] jQueryを使用して配列から特定の値を削除する方法
-
[解決済み] JSONPとは何か、素人目にもわかるように説明してくれる人はいませんか?[重複)。
-
[解決済み】Bootstrapのポップオーバーの幅を変更する方法
-
[解決済み] jQuery append() - 追記された要素を返す
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jQueryでPUT/DELETEリクエストを送信する方法は?
-
[解決済み] Google Maps APIでマウスのスクロールホイールによる拡大縮小を無効にする方法
-
[解決済み] 既存の非順序型リストにリストアイテムを追加する方法
-
[解決済み] jQueryで複数のCSS属性を定義するには?
-
[解決済み] jQueryを使用してテキストボックスの値を取得するには?
-
[解決済み] GoogleのCDNからjQuery UI CSSをダウンロードする
-
[解決済み] jQueryでフォームフィールドをクリアする
-
[解決済み] セレクトボックスの選択項目を設定する
-
[解決済み】jQueryでRSSをパースする。
-
[解決済み] Jqueryのコードはヘッダーとフッターのどちらに入れるべきですか?