11

ポップオーバーを表示するための次の JS コードがあります。

$('a').popover({content: 'Popover text', title: 'Popover'});
$('a').popover('show');

属性を変更したいと思います。たとえば、ポップオーバーの色を明るい黄色にしたいと思います。JSコード自体でこれを行う方法はありますか? おそらくテンプレートオプションで？

4

4 に答える 4

12

他の人が指摘しているように、ポップオーバーの色を変更する方法は、 と の CSS を変更すること.popoverです.popover.right .arrow:after。しかし、これを動的に実行したいので、次のようにします。

$('.popover').css('background-color', 'red');
$('.popover.right .arrow:after').css('border-right-color', 'red');

しかし、待ってください。2 番目の jQuery スニペットは正しくありません。はDOMの一部ではない:afterため、セレクターを使用できません。したがって、この世界のjavascriptはキャッチできません。ということでCSSを作りました。:after:after

.popover-danger {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: white;
}

.popover-danger.right .arrow:after {
    border-right-color: #d9534f;
}

ポップオーバーの色を変更する必要があるときはいつでも、次の jQuery スニペットを記述します。

$('#selector').next('.popover').addClass('popover-danger');

は#selector、ポップオーバーを適用した要素です。その要素から、次の を検索し.popoverます。これにより、現在の要素にのみ関連付けられたポップオーバーを確実に処理できます。:after次に、セレクターが JS なしで自然に適用されるように、クラスを追加するだけです。

JSFIDDLE デモ。

于 2015-08-25T13:33:27.467 に答える
0

ポップオーバーのタイトル バーとポップオーバー全体の背景色を変更するには、次のコードを試してください。

$('.popover-title').css("background-color", "#9FC53B");
$('.popover').css("background-color", "red");
于 2014-02-12T13:29:38.027 に答える