javascript - ブートストラップ: モーダルのポップオーバー

Question

Twitter の Bootstrap CSS ライブラリを使用して、既存のモーダルダイアログでポップオーバー効果を使用したいと考えています。ポップオーバーを小さな画像アイコンにバインドします。

$('#infoIcon').popover({
    offset: 50,
    placement: 'right'
});

ドキュメントに従って、モーダル自体も追加されます。

$('#modalContainer').modal({
    keyboard : true
});

しかし、私が得た効果は、ポップオーバーがモーダル div の上ではなくモーダルコンテナーの下にレンダリングされることです (下のスクリーンショットを参照)。ポップオーバーを真にモーダル div の上に移動するにはどうすればよいですか?

ここに画像の説明を入力

score 9 · Accepted Answer

Bootstrap の担当者は、この問題をバグとして認識し、次のリリースで修正しました。詳細はこちら

score 8 · Accepted Answer

そのために JavaScript は必要ありません。CSS を介してポップオーバーの z-index を設定するだけです。

.popover {
    z-index: 1060;
}

score 5 · Accepted Answer

それまでの間、次のことを試すことができます。

$('#infoIcon').popover({
    offset: 50,
    placement: 'right'
});

$("#infoIcon").data('popover').tip().css("z-index", 1060);

score 1 · Accepted Answer

1 つのウィンドウのz-index値を確認し、別のウィンドウの z-index をより優れた値で変更してみてください。使用しているプラグインが入力パラメーターでこの変更を許可していない場合は、jQuery css関数を使用してこれを行うことができます。

5 に答える 5