11

我有这个 JS 代码来弹出一个弹出窗口：

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

我想更改属性，例如，我希望弹出框的颜色为浅黄色。有没有办法可以在 JS 代码本身中做到这一点？也许在模板选项中？

4

4 回答 4

21

您可以使用 CSS 使用 、 和 类来做到.popover这.popover-title一点.popover-content。

.popover-title{
    background: #ffff99;
}
于 2013-07-16T18:09:04.360 回答
12

正如其他人指出的那样，更改弹出框颜色的方法是更改​​ 和 的.popoverCSS .popover.right .arrow:after。但由于我们希望这种情况动态发生，我们会这样做：

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

但是等等，第二个 jQuery 片段是不对的。您不能拥有:after选择器，因为:after它不是 DOM 的一部分，因此这个世界上没有任何 javascript 能够捕获:after. 所以我做了这个CSS。

.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 标题栏和完整 Popover 的背景颜色：

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

javascript:

$('#username').popover({
  title: '',
  content: 'error!'
  });
$('#username').popover('show');
$('.popover').addClass('popover-danger');

html:

<div id="username" class="input-group" data-html="true" data-placement="right">
  <span class="input-group-addon width-100 align-right">Username=</span>
  <input type="text" class="form-control" title="username" placeholder="Enter username..." v-model='username'/>
</div>

CSS：

.popover-danger {
    background-color: red !important;
    border-color: red !important;
    color: white !important;
}
于 2020-01-23T02:55:21.157 回答